How to find a div inside of an iframe

Question

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?

Answer 1

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

Answer 2

Use selector context:

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

Answer 3

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.