jQuery unable to .find() elements in iframe

Question

I have embeded jQuery mobile page using in my HTML page, but when I try to access its internal div tag using jQuery, the find method returns nothing.

HTML With jQuery

<iframe id="myframe" src="../codiqa/mobile.htm" 
    style="width: 500px; height: 520px; 
    border: 1px solid #ccc; margin-top:20px;">
</iframe>

here

$("#myframe").load(function(){
    alert($(this).contents().find('#mobilebutton').html());     
});

mobile code in iframe

<div id="mobilebutton" data-role="button">Mobile Button</div>

Is the mobilebutton in the HTML of the IFrame, or in the main page? — winner_joiner, Feb 04 '13 at 10:34
I'm not sure, still try accessing the ID directly $("#myframe").load(function(){ alert($('#mobilebutton').html()); }); — asifsid88, Feb 04 '13 at 10:35
@Tom Sarduy No, i have commented the code above .but there is no any other id in the whole page of that name — user1175106, Feb 04 '13 at 10:39
@user1175106: Update the question with the above code, so people don't have to read the comment thread ;) — Tomas Ramirez Sarduy, Feb 04 '13 at 10:42
Let me clear u all $(this).contents() return me an object but when i call .find() method on that object it does nothing — user1175106, Feb 04 '13 at 10:43

Adil · Answer 1 · 2013-02-04T18:40:17.563

1

Use window.load instead of $("#myframe").load. The elements of frame will be ready on $(window).load event and you will be able to access them.

$(window).load(function(){
    alert($("#myframe").contents().find('#mobilebutton').html());     
});

edited Feb 04 '13 at 18:40

answered Feb 04 '13 at 10:41

Adil

146,340
25
209
204

score 0 · Answer 2 · answered Feb 04 '13 at 10:49

According to jquery API guide: .html() "Get the HTML contents of the first element in the set of matched elements"

this way you need to add .parent in front of it to get the directed element. in this case:

$("#myframe").load(function(){
alert($(this).contents().find('#mobilebutton').parent.html()); });

In case you want to get the html of the button

score 0 · Answer 3 · edited May 23 '17 at 10:32

If @Adil solution doesn't work, you can try to add dynamically the iframe to attach the load event using this function:

function callIframe(url, callback) {
    $(document.body).append('<iframe id="myframe" 
                             style="width: 500px; height: 520px; 
                             border: 1px solid #ccc; margin-top:20px;">
                            </iframe> ');
    $('myframe').attr('src', url);
    $('myframe').load(function() 
    {
        alert($(this).contents().find('#mobilebutton').html())
    });
}

How to use it?

$('document').load(callIframe('../codiqa/mobile.htm'));

Further:

score 0 · Accepted Answer · edited Feb 28 '14 at 05:29

0

It Works fine on IE.

Try it

alert($(this).contents().find('#mobilebutton').html());

edited Feb 28 '14 at 05:29

Govinda Rajbhar

2,926
6
37
62

answered Feb 14 '13 at 11:48

user1175106

89
2
9

jQuery unable to .find() elements in iframe

Header

Footer

4 Answers4

How to use it?

Further: