框架在chrome中加载时的火灾事件

I am running Chrome with the --disable-web-security on. I need to dynamically pick a URL, display the frame contents when loaded, and know exactly when the frame has finished loading.

我正在使用--disable-web-security运行Chrome。我需要动态选择一个URL,在加载时显示帧内容,并确切知道帧何时完成加载。

I would love to know when the frame itself has loaded, and when every CSS etc/ have loaded.

我很想知道帧本身何时加载,以及何时加载了每个CSS等。

Test page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height: 100%" xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <meta http-equiv="Cache-Control" content="no-cache" />
      <meta http-equiv="Pragma" content="no-cache" />
      <title>The title</title>
   </head>

   <script type="text/javascript">
   document.addEventListener("DOMContentLoaded", function(event) {
    console.log("MAIN content loaded!");

    // Get iframe and iframe's window
    var iframe = window.frames[ 0 ];
    var iframeWindow = iframe.window;
    var iframeDocument = iframe.window.document;

    // Doesn't work
    iframe.addEventListener('load', function( e ) {
      console.log("IFRAME loaded!");
    });

    // Doesn't work
    iframeDocument.addEventListener('load', function( e ) {
      console.log("IFRAME loaded!");
    });

    // Doesn't work
    iframeWindow.addEventListener('load', function( e ) {
      console.log("IFRAME loaded!");
    });

    iframeWindow.onload = function(){
      console.log("IFRAME loaded!");
    };

    iframeWindow.location = "http://www.google.com";
  });

   </script>

   <!-- NOTE: Eventually, changing "url" will change the iframe source -->

   <body style="height:90%;">

     <p>App</p>
     <form>
       <input name="url" type="text" size="20%" value="http://">
     </form>

     <div id="frame" style="height:100%">
       <iframe style="width: 100%; height:100%;" src="">
     </div>
   </body>
</html>

How can I do this?

我怎样才能做到这一点?

1 个解决方案

#1

I would try first of all wrapping all this js in window.onload to make sure the javascript is firing at the right time.

我首先尝试在window.onload中包装所有这些js,以确保javascript在正确的时间触发。

window.onload=function(){
    // confirm that iframeWindow is correctly pointing to element
    iframeWindow.onload=function(){
        console.log('laoded')
    };
};

if that doesn't work , then give the iframe an id

如果这不起作用,那么给iframe一个id

<iframe id="myiFrame" style="width: 100%; height:100%;" src="">

window.onload=function(){
    var ifr=document.getElementById('myiFrame');
    iframeWindow.onload=function(){
        console.log('laoded')
    };
};

this should fix it, check console for errors, I have done this before and it worked , if both those don't fix it then there is something else outside this code going on

这应该修复它,检查控制台是否有错误,我之前已经完成了它并且它有效,如果这两个都没有解决它,那么这个代码之外还有其他东西在继续

notice I attached to the iFrame , not the window of the iFrame

注意我附加到iFrame,而不是iFrame的窗口

#1