检测Iframe内容已加载（跨浏览器） [英] Detecting when Iframe content has loaded (Cross browser)

问题描述

我尝试检测iframe及其内容何时加载，但没有运气。我的应用程序在父窗口的文本字段中输入一些内容，并更新iframe以提供实时预览。

我开始使用以下代码（YUI） iframe加载事件发生。

  $ E.on（'preview-pane'，'load'，function b $ b previewBody = $（'preview-pane'）。contentWindow.document.getElementsByTagName（'body'）[0]; 
} 
  

'preview-pane'是我的iframe的ID，我使用YUI来附加事件处理程序。但是，试图访问我的回调中的主体（在iframe加载）失败，我想因为iframe加载事件处理程序之前准备好这个代码工作，如果我通过使生成它睡眠的php脚本延迟iframe加载。

基本上，我要问什么是跨浏览器的正确方法来检测iframe何时加载并且其文档已准备好？

解决方案

检测iframe是否已加载并且其文档已准备好了？

iframe从框架内的脚本告诉你自己。例如，它可以直接调用父函数来告诉它它已经准备好了。对于跨框架代码执行，始终需要谨慎，因为事情可能以您不期望的顺序发生。另一种方法是在自己的范围内设置'var isready = true;'，并为'contentWindow.isready'设置父脚本sniff（如果没有，添加onload处理程序）。

如果由于某些原因使iframe文档合作是不实际的，那么你就会遇到传统的负载竞争问题，即即使元素彼此相邻：

 < img id =x... /> 
< script type =text / javascript> 
 document.getElementById（'x'）。onload = function（）{
 ... 
}; 
< / script> 
  

不能保证在脚本执行时项目不会被加载。 / p>

载入比赛的方法有：

1. ，您可以使用readyState属性查看是否已加载某些内容;




2. 如果只有启用JavaScript的项目可用，动态地，在设置源和附加到页面之前设置'onload'事件功能。在这种情况下，它不能在回调设置之前加载;




3. 旧式的方式将其包含在标记中：

   
   
   

   < img onload =callback（this）... />

HTML中的inline'onsomething'处理程序几乎总是错误的事情，需要避免，但在这种情况下有时候是最不糟糕的选项。

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'

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' 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.

Basically, I'm asking what is the correct approach across browsers to detect when the iframe has loaded and its document is ready?

解决方案

to detect when the iframe has loaded and its document is ready?

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).

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:

1. on IE, you can use the ‘readyState’ property to see if something's already loaded;

2. 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;

3. the old-school way of including it in the markup:

   <img onload="callback(this)" ... />

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屋！