Menu
Using jQuery I am trying to access div id="element".
<body> <iframe id="uploads"> <iframe> <div id="element">...</div> </iframe> </iframe> </body> All iframes are on the same domain with no www / non-www issues.
I have successfully selected elements within the first iframe but not the second nested iframe.
I have tried a few things, this is the most recent (and a pretty desperate attempt).
var iframe = jQuery('#upload').contents(); var iframeInner = jQuery(iframe).find('iframe').contents(); var iframeContent = jQuery(iframeInner).contents().find('#element'); // iframeContent is null Edit: To rule out a timing issue I used a click event and waited a while.
jQuery().click(function(){ var iframe = jQuery('#upload').contents().find('iframe'); console.log(iframe.find('#element')); // [] null }); Any ideas? Thanks.
Update: I can select the second iframe like so...
var iframe = jQuery('#upload').contents().find('iframe'); The problem now seems to be that the src is empty as the iframe is generated with javascript. So the iframe is selected but the content length is 0.
382
HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML <iframe> tag defines an inline frame, hence it is also called as an Inline frame. An HTML iframe embeds another document within the current HTML document in the rectangular region.
you cannot nest “iframe elements”. outer element will render and your code will fail validation.
Deprecated AttributesSome attributes from HTML4 are no longer allowed in HTML5 at all and they have been removed completely. img and iframe. caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr. table, tr, td, th and body.
var iframe = $('iframe'); // or some other selector to get the iframe $('[tokenid=' + token + ']', iframe. contents()). addClass('border'); Also note that if the src of this iframe is pointing to a different domain, due to security reasons, you will not be able to access the contents of this iframe in javascript.
Thing is, the code you provided won't work because the <iframe> element has to have a "src" property, like:
<iframe id="uploads" src="http://domain/page.html"></iframe> It's ok to use .contents() to get the content:
$('#uploads).contents() will give you access to the second iframe, but if that iframe is "INSIDE" the http://domain/page.html document the #uploads iframe loaded.
To test I'm right about this, I created 3 html files named main.html, iframe.html and noframe.html and then selected the div#element just fine with:
$('#uploads').contents().find('iframe').contents().find('#element'); There WILL be a delay in which the element will not be available since you need to wait for the iframe to load the resource. Also, all iframes have to be on the same domain.
Hope this helps ...
Here goes the html for the 3 files I used (replace the "src" attributes with your domain and url):
main.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>main.html example</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function () { console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // nothing at first setTimeout( function () { console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // wait and you'll have it }, 2000 ); }); </script> </head> <body> <iframe id="uploads" src="http://192.168.1.70/test/iframe.html"></iframe> </body> iframe.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>iframe.html example</title> </head> <body> <iframe src="http://192.168.1.70/test/noframe.html"></iframe> </body> noframe.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>noframe.html example</title> </head> <body> <div id="element">some content</div> </body> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
