动态创建一个iframe并将onload事件附加到它上面。

Question

我动态创建了一个 iframe 并给它添加了 src 属性。然后我将这个 iframe 添加到页面的 body 中。现在我想为 iframe 添加一个 onload 事件来读取 iframe 的内容。有人可以建议我怎么做吗？

frame = document.createElement('iframe');
frame.setAttribute('src','http://example.com');
body.appendChild(frame);
frame.onload = function(){
    alert('hi'); // here I want to read the content in the frame.
}

- sushil bharwani

Answer 1

有些浏览器确实为iframe提供了onload事件，在设置iframe的src属性之前，首先应该尝试附加它。

我建议完全避免使用它，因为在某些浏览器中，它在某些情况下可能不会触发（例如，在IE中，目标已缓存时）。

您可以使用计时器来检查框架的contentWindow的readystate是否完成。

var inter = window.setInterval(function() {
    if (frame.contentWindow.document.readyState === "complete") {
      window.clearInterval(inter);
      // grab the content of the iframe here
    }
}, 100);

- Asaf

---

它对我不起作用，因为iframe在另一个源中，我收到了SecurityError：阻止了来自“http://localhost”的框架访问跨源框架。 - Ofershap

你是正确的，它确实只能在相同源框架中工作。根据你计划支持哪些浏览器，假设 window.onload 功能更好可能会更安全。 - Asaf

Answer 2

你可以在 iframe 的 contentWindow 上添加一个 load 事件 监听器，这与任何其他 Window 相同。

以下是一个 示例：

      iframe = document.createElement('iframe')
      iframe.setAttribute('src', 'https://example.com/')

      document.getElementsByTagName('body')[0].appendChild(iframe)
      const onLoaded = function() {
        console.log('iframe loaded');
      }
      if (iframe.contentWindow.document.readyState === 'complete') {
        console.log('already loaded')
        onLoaded()
      } else {
        iframe.contentWindow.addEventListener('load', onLoaded)
      }

- Tyler Rick

Answer 3

我刚刚尝试了一下，在Chrome中可以正常工作：

var iframe = document.createElement('iframe');
// append iframe to DOM however you like then:
iframe.contentWindow.parent.location.href // properly gives parent window's href.

W3school说contentWindow在所有主要浏览器中都得到了支持。

- Mauvis Ledford

---

我相信（W3school）他们，成千上万的人也不会怀疑。 - stellard

Answer 4

我怀疑你能否将onload事件附加到iframe上。它在所有浏览器上都不起作用。另一方面，您可以通过以下方式检查iframe是否已加载：

window.onload=function()
{
var iframe=document.getElementById('myframe');
if(iframe) 
    alert('The iframe has just been loaded.');
}

或者使用 AJAX 在您的容器中加载内容。使用 AJAX，您可以设置适当的加载完成事件。

- Anze Jarni

---

尝试使用 onload="return function_name();" - Anze Jarni

如果你想亲自动手并增加一些复杂度，你可以创建一个定期的计时器，它会记住 iframe 的 document.body.innerHTML，并在每次变化时触发你自己的事件。如果你只需要执行一次，你可以在事件触发后销毁计时器。 - Anze Jarni

添加iframe.onload监听器以检查加载。 - Raju Ram