Best IT Recipes

Is jQuery.ready () valid when used in iframe.contentDocument?

A simple question (as indicated in the title): Is jQuery.ready() valid when used on iframe.contentDocument ?

And the tricky question:

I need to connect the keyup event in the input field in the CMS, so I can not control the HTML, only the script.

The input is inside an iframe, which is nested in another iframe, so there is a top window (browser window), iframe (allows you to call it iframe1) and another iframe inside it (allows you to call one iframe2). script and jQuery are in the <head> section of the top window.

I don't really like setTimeout/setInterval , so my initial thought was to use jQuery.ready() like this (I skipped the code that selects iframes):

 $(document).ready(function(){ $(iframe1.contentDocument).ready(function(){ $(iframe2.contentDocument).ready(function(){ $("input").keyup(function(){ /* Do stuff */ }); }); }); });

The problem is that by the time .ready() iframe1 is triggered, I can check iframe1.contentDocument.body.innerHTML and this will be an empty string. Not what one would expect. As a result of this code, it is not possible to bind a keyup event.

In case someone thinks: “Are you using the correct selector context?”: Yes, I select iframe elements in the correct documents (although the above code snippet may not fully explain this, since I just wanted to save it). There is also no problem with the origin policy - all iframes and parent windows are in the same domain.

Using $(window).load() seems to work, but waiting for images to load, etc. Waiting time is too long, which is not acceptable for the application.

Is it possible to achieve jQuery.ready() functionality that will work with an iframe without using jQuery.load() ?

+3
javascript jquery iframe document-ready
May 03 '11 at 13:21
source share
3 answers

I just did not accept the answer to this question.

Short answer: None.

Long answer:

jQuery.isReady set to true as soon as jQuery considers the DOM to be ready and fires the event handlers associated with the finished event. It checks (among several other things) whether document.body is determined by repeating setTimeout() before it is defined, but only for the window in which jQuery is defined. In other words, it does not work for (i) frames.

Ready code from the current version of jQuery (1.8.0):

 // Handle when the DOM is ready ready: function( wait ) { // Abort if there are pending holds or we're already ready if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) { return; } // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). if ( !document.body ) { return setTimeout( jQuery.ready, 1 ); } // Remember that the DOM is ready jQuery.isReady = true; // If a normal DOM Ready event fired, decrement, and wait if need be if ( wait !== true && --jQuery.readyWait > 0 ) { return; } // If there are functions bound, to execute readyList.resolveWith( document, [ jQuery ] ); // Trigger any bound ready events if ( jQuery.fn.trigger ) { jQuery( document ).trigger("ready").off("ready"); } },
+1
Aug 21 2018-12-12T00:
source share

I'm not sure if this was meant in your aversion to using $(window).load() , but you can bind load() directly to the iframe and get as much as possible without having direct access to add jquery to the iframe content.

In the past, I did something similar to dynamically resize an iframe based on the height of its contents. Here is an example that cannot be directly connected, but you should be able to understand the essence of its work.

  $(function(){ var $content_iframe = $('#content_iframe') $content_iframe.load( function(){ var contentHeight = $content_iframe.contents().find('html body').height(); if (contentHeight > 1070){ $(this).height(contentHeight + 30); } else{ $(this).height(1100); } } ); })

This may have the same drawbacks as image loading times, etc. Good luck!

+1
May 03 '11 at 15:27
source share

If you control the pages loaded in the <iframe> fields, they can also load their own jQuery copies and have their own .ready () handlers. These handlers can, in turn, link to the “top” page of the JavaScript code (possibly via the jQuery “Delayed” object), so that your external page can be configured to run the code when all frames become ready.

You want to set the parent page code to "ready" because you do not know for sure that the parent page will be ready before the child <iframe> pages.

0
May 03 '11 at 13:27
source share


More articles:


All Articles