StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIs jQuery.ready() valid when used on iframe.contentDocument?
text
Body
copied!<p>Simple question (as stated in the title): Is <code>jQuery.ready()</code> valid when used on <code>iframe.contentDocument</code>?</p> <p>And the complex question:</p> <p>I have to hook a keyup event on an input field in a CMS, hence I have no control over the HTML, only the script.</p> <p>The input is inside an iframe that's nested in another iframe, so there's a top window (the browser window), an iframe (lets call it iframe1) and another iframe inside of that (lets call that one iframe2). The script and jQuery are located in the <code><head></code> section of the top window.</p> <p>I'm not really fond of <code>setTimeout/setInterval</code>, so my initial thought was to use <code>jQuery.ready()</code> like this (I have omitted the code selecting the iframes):</p> <pre><code>$(document).ready(function(){ $(iframe1.contentDocument).ready(function(){ $(iframe2.contentDocument).ready(function(){ $("input").keyup(function(){ /* Do stuff */ }); }); }); }); </code></pre> <p>Problem is, by the time <code>.ready()</code> fires on iframe1 I can check <code>iframe1.contentDocument.body.innerHTML</code> and it turns out to be an empty string. Not what one would expect. The code fails to bind the keyup event as a result of this.</p> <p>In case anyone is thinking "Are you using the correct selector context?": Yep I'm selecting the iframe elements in the correct documents (although the code piece above may not fully examplify this, as I wanted to keep it simple). Nor are there any same origin policy issues - all iframes and parent window are on the same domain.</p> <p>Using <code>$(window).load()</code> seems to work, but waiting for images etc. to be loaded is subject to far too long waiting times than will be unacceptable for the application.</p> <p>Is there away to achieve a <code>jQuery.ready()</code> functionality that will work on the iframes without using <code>jQuery.load()</code>?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload