2

I'm trying to trigger an alert when an <iframe> and its CSS files are loaded and rendered.

I have the following so far:

$("#content_ifr").ready(function (){
        alert('iframe ready');
});

The problem with this is that the alert is happening before the CSS is rendered on the page, after the Alert is closed, then you see the CSS taking effect in the browser.

Any ideas on how to solve this with OUT a sloppy timeout hack?

Thanks.

AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012

3 Answers3

2

You want to use .load(), not .ready().

removed possible solution because it used a non-standard iframe property

Here is where I found it: Stackoverflow post

Edit: removed last possible example. Did some quick searching and .load should work on iframes. Can you put up a sample page showing the issue?

Edit: Another way to tie the load in there is to do this:

$(frameSelector).bind("load", "function call here");
Community
  • 1
  • 1
Adrian
  • 2,911
  • 1
  • 17
  • 24
  • THanks, but that is still calling before the CSS is done loading in TinyMCE – AnApprentice Dec 01 '10 at 22:40
  • Actually, .load doesn't even fire the alert – AnApprentice Dec 01 '10 at 22:41
  • Updated with a more hackish timeout approach. (= – Adrian Dec 01 '10 at 22:45
  • Thanks, tried that but "xxxx.js:66Uncaught TypeError: Cannot read property 'readyState' of null xxxx.js:66Uncaught TypeError: Cannot read property 'readyState' of null" – AnApprentice Dec 01 '10 at 22:47
  • The example would be complicated bec it's a TINY Mce iframe.. which I think is the problem, I just read that getElementById doesn't work for AJAX injected content, which is what TinyMCE is doing... How does one use getElementById with AJAX injected content? maybe with a find or live? – AnApprentice Dec 01 '10 at 22:55
  • Did some more digging and readystate is non-standard property so it might not be implemented in all browsers. can we get a code dump showing the issue. So if you could put a sample page somewhere public that I could play with I can see why the .load wasn't firing. – Adrian Dec 01 '10 at 23:00
2

Since it's tinyMCE you're dealing with, have you tried their APIs?

http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.Editor

I'm thinking onLoadContent is your best bet, but I'm not sure if it does any CSS magic.

The only way we've found to pause loading until a CSS is loaded is a sloppy timeout hack. basically:

  1. set a real specific rule, like div.test-file-loaded{ color: #123456 }
  2. create a div of that class.
  3. check if color of that element is #123456, keep timeouting and retrying until it is.

Would really like to know if there's a non hack way, but I don't think there is. Since you're dealing with an iframe, even more hackiness will be needed....

Mike Ruhlin
  • 3,546
  • 2
  • 21
  • 31
  • That seems pretty smart and stable rather than a unrelated timeout. Can you share the code your using when init TinyMCE? – AnApprentice Dec 01 '10 at 23:48
0

This approach is tested and works for the mentioned list of browsers:

See this Working Solution!

jQuery

setup : function(ed) {
  ed.onLoadContent.add(function(ed, o) {
    var controlLoad = setTimeout(function() {
      if ($('.mceIframeContainer').size()==1) {
        alert('done');
        clearTimeout(controlLoad);
      }
    }, 100);
  });
}

What this is doing is to run a timeout until the class .mceIframeContainer is found, meaning that the loading is done. After finding it, sets the focus for the first input element and the timeout is cleared.

TESTED ON

Windows XP Profissional versão 2002 Service Pack 3

  • Internet Explorer 8.0.6001.18702
  • Opera 11.62
  • Firefox 3.6.16
  • Safari 5.1.2
  • Google Chrome 18.0.1025.168 m

Windows 7 Home Edition Service Pack 1

  • Internet Explorer 9.0.8112.164211C
  • Opera 11.62
  • Firefox 12.0
  • Safari 5.1.4
  • Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

  • Firefox 12.0
  • Chromium 18.0.1025.151 (Developer Build 130497 Linux)
Zuul
  • 16,217
  • 6
  • 61
  • 88