Question

我已经创建了一个iframe dynamicaly并为其添加了一个src属性。然后我将这个iframe附加到页面的正文。知道我想将一个onload事件附加到iframe以读取iframe内容。有人可以建议我怎么做。

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

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

Answer 2

我刚试过这个，它在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。

Answer 3

您可以将load event侦听器添加到iframe的contentWindow中，就像其他Window一样。

这里是example：

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

Answer 4

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

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

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

动态创建iframe并将onload事件附加到它

4 个答案: