【问题标题】：How can I trigger a jQuery alert when an iframe AND its CSS is loaded and rendered?加载和渲染 iframe 及其 CSS 时，如何触发 jQuery 警报？
【发布时间】：2011-05-18 19:19:12
【问题描述】：

我正在尝试在 <iframe> 及其 CSS 文件加载和呈现时触发警报。

到目前为止，我有以下内容：

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

这样做的问题是，警报发生在 CSS 呈现在页面上之前，在警报关闭之后，您会看到 CSS 在浏览器中生效。

关于如何通过 OUT 一个草率的超时黑客来解决这个问题的任何想法？

谢谢。

【问题讨论】：

呜呜呜没有一个草率的超时黑客:)
您是否可以访问 iframe 的脚本，并且它是否在同一个域中？

标签： jquery css iframe tinymce

【解决方案1】：

由于您正在处理的是 tinyMCE，您是否尝试过他们的 API？

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

我认为 onLoadContent 是你最好的选择，但我不确定它是否有任何 CSS 魔法。

我们发现在加载 CSS 之前暂停加载的唯一方法是草率的超时黑客。基本上：

设置一个真正的特定规则，例如 div.test-file-loaded{ 颜色：#123456 }
创建该类的 div。
检查该元素的颜色是否为#123456，保持超时并重试直到是。

真的很想知道是否有非 hack 方式，但我认为没有。由于您正在处理 iframe，因此需要更多的hackiness....

【讨论】：

这看起来相当聪明和稳定，而不是无关的超时。你能分享你在初始化 TinyMCE 时使用的代码吗？

【解决方案2】：

您想使用.load()，而不是.ready()。

删除了可能的解决方案，因为它使用了非标准 iframe 属性

这是我找到它的地方：Stackoverflow post

编辑：删除了最后一个可能的例子。做了一些快速搜索，.load 应该适用于 iframe。你能提供一个显示问题的示例页面吗？

编辑：另一种绑定负载的方法是这样做：

$(frameSelector).bind("load", "function call here");

【讨论】：

谢谢，但在 TinyMCE 中完成加载 CSS 之前仍在调用
实际上，.load 甚至不会触发警报
更新了更骇人听闻的超时方法。（=
谢谢，试过了，但是“xxxx.js:66Uncaught TypeError: Cannot read property 'readyState' of null xxxx.js:66Uncaught TypeError: Cannot read property 'readyState' of null”
这个例子会很复杂，因为它是一个 TINY Mce iframe。我认为这是问题所在，我刚刚读到 getElementById 不适用于 AJAX 注入的内容，这就是 TinyMCE 正在做的事情。 . 如何将 getElementById 与 AJAX 注入内容一起使用？也许有一个发现或生活？

【解决方案3】：

此方法经过测试，适用于上述浏览器列表：

看到这个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);
  });
}

这样做是运行超时，直到找到类.mceIframeContainer，这意味着加载完成。找到后，为第一个输入元素设置焦点并清除超时。

已测试

Windows XP 专业版 2002 Service Pack 3

Internet Explorer 8.0.6001.18702
Opera 11.62
火狐 3.6.16
Safari 5.1.2
谷歌浏览器 18.0.1025.168 m

Windows 7 家庭版服务包 1

Internet Explorer 9.0.8112.164211C
Opera 11.62
火狐12.0
Safari 5.1.4
谷歌浏览器 18.0.1025.168 m

Linux Ubuntu 12.04

火狐12.0
Chromium 18.0.1025.151（开发者内部版本 130497 Linux）

【讨论】：