加载和渲染 iframe 及其 CSS 时，如何触发 jQuery 警报？

Posted 2023-05-08

技术标签:

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

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

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

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

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

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

谢谢。

【问题讨论】：

呜呜呜没有一个草率的超时黑客:) 您是否可以访问 iframe 的脚本，并且它是否在同一个域中？ 【参考方案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 属性

这是我找到它的地方：*** 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，这意味着加载完成。找到后，为第一个输入元素设置焦点并清除超时。