CODEWITHSUNDEEP
jqueryiframe
rajaishbt
rajaishbt

Reputation: 310

How to find a div inside of an iframe

I am trying to use jquery to find a div inside an iframe. Is there a better way than the one I'm using below?

$('#Iframe').contents().find('#MyDiv')

function atmslidein(){
   $("#customer").ready(function(){         
       if($('#customer').attr('src')=='ATM.html')
       {
          $('#customer').contents().find('.atm_page').css('margin-left', '270px'); 
          $('#customer').contents().find('.tele').css('display', 'none');
       }
    })
}

I've tried almost a week to make this work:

$('#Iframe').contents().find('#MyDiv')

That is why I tried another way to access the iframe's div.

Anyway I found something that the iframe document should have and only then the above function works properly:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

My problem is solved, thanks. But could someone explain why this is necessary?

Upvotes: 9

Views: 27455

Answers (3)

moribvndvs
moribvndvs

Reputation: 42497

I don't think the jQuery can access the contentWindow/Document's content in that way. In the past, I've had to do this:

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

** Note that this.contentWindow||this.contentDocument is required to work correctly across IE and most other browsers. Once you get the content window, you need to select the document. Then you can use jQuery to manipulate or traverse the DOM, but only if the iframe's source is in the same domain.

** Updated to fix error where we don't specify the document after we get the contentWindow/Document.

Upvotes: 13

Lex
Lex

Reputation: 1378

Use selector context:

var frame = $('#frame_id');
var div = $('#mydiv', frame);

Upvotes: -1

Luis
Luis

Reputation: 6001

This will only work if the Iframe source is in the same domain as your page, if not the browser wont allow it for security reasons

Upvotes: 4

Related Questions