检测 Iframe 内容何时加载(跨浏览器) [英] Detecting when Iframe content has loaded (Cross browser)
问题描述
我正在尝试检测 iframe 及其内容何时加载，但运气不佳.我的应用程序在父窗口的文本字段中输入一些内容并更新 iframe 以提供实时预览"
I'm trying to detect when an iframe and its content have loaded but not having much luck. My application takes some input in text fields in the parent window and updates the iframe to provide a 'live preview'
我从以下代码 (YUI) 开始检测 iframe 加载事件何时发生.
I started with the following code (YUI) to detect when the iframe load event occurs.
$E.on('preview-pane', 'load', function(){
previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0];
}
'preview-pane' 是我的 iframe 的 ID，我使用 YUI 来附加事件处理程序.但是，尝试在我的回调中访问主体(在 iframe 加载时)失败，我认为是因为 iframe 在事件处理程序准备就绪之前加载.如果我通过使生成 iframe 的 php 脚本休眠来延迟 iframe 加载，则此代码有效.
'preview-pane' is the ID of my iframe and I'm using YUI to attach the event handler. However, trying to access the body in my callback (upon iframe load) fails, I think because the iframe loads before the event handler is ready. This code works if I delay the iframe loading by making the php script that generates it sleep.
基本上，我在问什么是跨浏览器检测 iframe 何时加载且其文档已准备就绪的正确方法?
Basically, I'm asking what is the correct approach across browsers to detect when the iframe has loaded and its document is ready?
推荐答案
检测 iframe 何时加载并且其文档已准备好?
to detect when the iframe has loaded and its document is ready?
如果您可以让 iframe 从框架内的脚本中告诉您自己，那将是理想的选择.例如，它可以直接调用一个父函数来告诉它它已经准备好了.跨框架代码执行总是需要小心，因为事情可能会以您意想不到的顺序发生.另一种选择是在其自己的范围内设置var isready= true;"，并让父脚本嗅探contentWindow.isready"(如果没有，则添加 onload 处理程序).
It's ideal if you can get the iframe to tell you itself from a script inside the frame. For example it could call a parent function directly to tell it it's ready. Care is always required with cross-frame code execution as things can happen in an order you don't expect. Another alternative is to set ‘var isready= true;’ in its own scope, and have the parent script sniff for ‘contentWindow.isready’ (and add the onload handler if not).
如果由于某种原因让 iframe 文档协作不切实际，您就会遇到传统的负载竞争问题，即即使元素彼此相邻:
If for some reason it's not practical to have the iframe document co-operate, you've got the traditional load-race problem, namely that even if the elements are right next to each other:
<img id="x" ... />
<script type="text/javascript">
document.getElementById('x').onload= function() {
...
};
</script>
无法保证该项目在脚本执行时尚未加载.
there is no guarantee that the item won't already have loaded by the time the script executes.
摆脱负载竞争的方法是:
The ways out of load-races are:
在 IE 上，您可以使用readyState"属性来查看是否已经加载了某些内容；
on IE, you can use the ‘readyState’ property to see if something's already loaded;
如果项目仅在启用 JavaScript 时可用是可以接受的，您可以动态创建它，在设置源和附加到页面之前设置onload"事件函数.在这种情况下，在设置回调之前无法加载；
if having the item available only with JavaScript enabled is acceptable, you can create it dynamically, setting the ‘onload’ event function before setting source and appending to the page. In this case it cannot be loaded before the callback is set;
将其包含在标记中的老式方法:
the old-school way of including it in the markup:
<img onload="callback(this)" .../>
HTML 中的内联onsomething"处理程序几乎总是错误的，应该避免，但在这种情况下，有时它是最不坏的选择.
Inline ‘onsomething’ handlers in HTML are almost always the wrong thing and to be avoided, but in this case sometimes it's the least bad option.
这篇关于检测 Iframe 内容何时加载(跨浏览器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
