4

所以我创建了一个 iframe，它应该在函数运行后继续重新加载。该函数读取 iframe 中的信息。目前我有这样的东西（有效）；

function loaded(){
    alert(iframe.contentDocument.getElementsByClassName("blah")[0].innerHTML);
    iframe.src = filePath; //reloads the iframe
}

iframe.onload = loaded;

因为我希望它执行得更快，所以这样的工作吗？一旦 iframe 加载了 DOM，函数就会在哪里运行；

function loaded(){
    alert(iframe.contentDocument.getElementsByClassName("blah")[0].innerHTML);
    iframe.src = filePath; //reloads the iframe
}

iframe.addEventListener("DOMContentLoaded", loaded, false);
4

2 回答 2

1 
iframe.onreadystatechange = () => {
    if (iframe.readyState === "interactive") {
        // your code here
    }
};

我知道，这是一个非常古老的问题，但是当我在寻找解决这个问题的方法时，我使用谷歌找到了这个问题

于 2020-03-19T00:47:51.607 回答
1

您能做的最好的事情就是使用Messaging API。

从您的 <iframe> 文档中，您将向其发送一条消息，parent让其知道 DOM 已加载。

const iframe = document.getElementById( 'iframe' );
// set up the event handler on main page
window.addEventListener( 'message', (evt) => {
  if( evt.source === iframe.contentWindow) {
    console.log( evt.data );
  }
} );
iframe.onload = (evt) => console.log( 'onload' );

// For the snippet, we'll load the iframe document from a Blob
const iframe_document = new Blob( [`
<script>
  document.addEventListener( 'DOMContentLoaded', (evt) => {
    // tell the parent window we are ready
    parent.postMessage( 'DOM loaded', '*' );
  });
<\/script>
<h1>Hello world</h1>
<img src='https://i.picsum.photos/id/13/500/300.jpg?${Math.random()}' style="border:1px solid">
`], { type: "text/html" } );
iframe.src = URL.createObjectURL( iframe_document );
<iframe id="iframe" width="520" height="500"></iframe>

于 2020-03-19T01:12:31.103 回答