Select input field from iframe - jQuery

Question

I need help with selecting an input field from iframe with jquery, the iframe looks like this :

<iframe src="https://checkout.klarna.com" id="klarna-checkout-iframe" name="klarna-checkout-iframe" class="kloading" scrolling="no" frameborder="0" style="height: 940px; width: 100%; transition: height 0.15s;"></iframe>
<input class="-test" type="text" name="challenge.postal_code" value="name">
<input class="-square" type="tel" name="challenge.postal_code" value="03434">
</iframe>

and I am using this jQuery code to get a input field :

<script type="text/javascript">
var iframe = $('iframe').contents()find('input[type=tel]')
</script>

and now for testing the input field I use this jQuery for change style of it :

$(iframe).style.border = '1px solid #000000'

I have tried many things to make it work, but I still cannot select the iframe, is there somebody here that can help me?

there are quite a few errors in your code. you should open the console in your browser and that will give you some clues. For example you need to chain the jquery methods - `$('iframe').contents()find` won't work. You need to add a dot after `contents()` so it is `$('iframe').contents().find()` — Paul Fitzgerald, Mar 18 '16 at 17:20
Quite possibly, Have you tried with the updated code provided below? What does it say in the console with that code? — Paul Fitzgerald, Mar 18 '16 at 17:25

Paul Fitzgerald · Answer 1 · 2016-03-18T17:27:06.980

0

have you tried the below?

<iframe src="https://checkout.klarna.com" id="klarna-checkout-iframe" name="klarna-checkout-iframe" class="kloading" scrolling="no" frameborder="0" style="height: 940px; width: 100%; transition: height 0.15s;">
    <input class="-test" type="text" name="challenge.postal_code" value="name">
    <input class="-square" type="tel" name="challenge.postal_code" value="03434">
</iframe>

 <script type="text/javascript">
    var iframe = $("#klarna-checkout-iframe").contents().find('input[type="tel"]');
    $(iframe).css("border","1px solid #000000"); 
</script>

edited Mar 18 '16 at 17:27

answered Mar 18 '16 at 17:10

Paul Fitzgerald

11,770
4
42
54

@yapnop try it again, as the `iframe` is now closed at the correct point – Paul Fitzgerald Mar 18 '16 at 17:23

score 0 · Answer 2 · answered Mar 18 '16 at 17:13

0

Here try this.

$('#iframe').each(function() {
   $('#MyDiv', this.contentWindow.document||this.contentDocument);
});

Note: Iframe contents are available only if they are on the same domain.

answered Mar 18 '16 at 17:13

Abdul Mannan

1,072
12
19

problem is here that they are not in same domain! so what can i do? – yapnop Mar 18 '16 at 17:19
@yapnop Because of security issues, that is not possible: http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe – Streetlamp Mar 18 '16 at 17:21

score 0 · Answer 3 · answered Mar 18 '16 at 17:20

0

Your iframe is closed early:

<iframe ...></iframe>
...           ^^^^^^
</iframe>

Remove the extraneous closing tag.

answered Mar 18 '16 at 17:20

Streetlamp

1,537
2
15
27

@yapnop combine that with the code I provided and it should work – Paul Fitzgerald Mar 18 '16 at 17:21

Select input field from iframe - jQuery

3 Answers3