Detecting DOM Ready State Within an iFrame jQuery

Question

I have a script being run in a document that may or may not be nested in an iframe. I have sorted out the issue of detecting the nested, but I can't figure out how to detect the ready state of the DOM when it is an iframe.

Here is what I have already:

if (window.self !== window.top) {
    // is nested
    // DOM ready test here
        // execute code here
} else {
    // is not nested
    $(document).ready(function() {
        // execute code here
    });
}

I have already read this post, but I don't see the answer to my specific question. I may be misunderstanding the solutions there, so feel free to correct me.

EDIT: This seems to be a Fancybox issue. This code:

alert(document.getElementById('username').className);
document.getElementById('username').focus();

I see an alert with the correct value, but the form element does not receive the focus. This tells me that it's not an issue with detecting the DOM's ready state. The original script I was trying to use was this:

$(document).ready(function() {
    $('input.focus:last').focus();
});

EDIT 2/SOLUTION: I had to resort to a Fancybox specific solution because it appears to be a Fancybox specific issue. I added this line to the configuration for these Fancybox iframed forms:

'onComplete':function(){$('input.focus:last').focus();}

rajatha · Answer 1 · Aug 2, 2022

You can place a SCRIPT tag at the end of the iframe BODY tag.
Then add your code there, it will be executed when the iframe body is loaded.

You can either run a local JS code of the iframe, or call an object in the parent like:

<body>
  ...
  <script>
    parent.myObj.iframeLoaded(document.body);
  </script>
</body>

To my experience, the onload event in IE is not reliable.
i.e: it won't wait to the JS inside the iframe to be loaded before firing.

answered Aug 2, 2022 by rajatha
• 7,680 points

Detecting DOM Ready State Within an iFrame jQuery

Your comment on this question:

1 answer to this question.

Your answer

Your comment on this answer:

Related Questions In Web Development

Scroll to an element with jQuery

Page Reload/Refresh executes $(document).ready() on every page in jQuery Mobile

How an I get all form elements (input, textarea & select) with jQuery?

jQuery Remain at the top of an open collapsible table row when clicked

What is jQuery?

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Uncaught Error: Bootstrap's JavaScript requires jQuery

How to make Bootstrap popover Appear/Disappear on hover instead of click?

How to change an element's title attribute using jQuery

How to change the jquery mobile flip switch state from code

Subscribe to our Newsletter, and get personalized recommendations.

TRENDING CERTIFICATION COURSES

TRENDING MASTERS COURSES

COMPANY

WORK WITH US

DOWNLOAD APP

CATEGORIES

CATEGORIES

TRENDING BLOG ARTICLES

TRENDING BLOG ARTICLES