Question

我试图使用javascript在另一个中嵌入两个html文档。我遇到的问题是onload事件不会触发嵌入文档。

paper.htm有几个div标签，应该包含curve.htm，但在curve.htm中，onload事件没有触发

paper.htm

<html>
<head>
    <title>Curve</title>    
    <script>
        (function () {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'curve.htm', true);
            xhr.onreadystatechange = function () {
                if (this.readyState !== 4) return;
                if (this.status !== 200) return;
                document.getElementById('chartBlock').innerHTML = this.responseText;
            }
            xhr.send();
        })();
    </script>
</head>
<body>
    <div id="paper">
        <div id="border">
            <div id="chartBlock"></div>
            <div id="titleBlock"></div>
        </div>
    </div>
</body>
</html>

curve.htm（部分）

<html>
<head>
    <script src="File:///Temp/curveData.js" type="text/javascript"></script>
    <script>
    window.onload = init; //this never fires!
    function init() { //... }
    </script>
<body>
    <canvas id="chartCanvas" width="954" height="625"></canvas>
</body>
</html>

我试过了：

使用jquery加载html文档（这里有很多例子）。
将onload放在html文档的body标签中（curve.htm）

尝试使用jquery：

<script>
    $(function () {
        $("#chartBlock").load("curve.htm");
        $("#titleBlock").load("titleblock.htm");
    });
</script>

尝试使用html：

<body onload="init()">

非常感谢任何其他想要研究的想法。感谢

Answer 1

因为不会加载文件......

您正在使用iframe实现。使用iframe，您将加载一个完整的html文档，该文档将被解析。使用$.load函数，您只需直接插入html，它将被解析为<body>的子项。含义;所有/适当的浏览器都会忽略<head>，<meta>标签等，因为它们只应出现在文档的头部内。简化后，您的输出将是：

<html>
    <head>
        <!-- whatever -->
    </head>
    <body>

        <div id="chartBlock">
            <html>
                <!-- What?! Another html tag?! -->
            </html>
        </div>
        <div id="titleBlock">
            <html>
                <!-- And another one... -->
            </html>
        </div>

    </body>
</html>

所以，你想要做的是，只加载内容，<body>标签内的内容，并使用$.load LOOKUPVALUE()如果内容已插入文档中，则执行您想要执行的操作。

Answer 2

您仍然可以在不使用iframe的情况下加载页面，您只需稍微改变一下即可。基本上，因为您将一个html页面放在div中，所以该页面上的脚本永远不会被渲染。

要使其工作，需要将脚本插入父文档头。

获取脚本并将其插入头部：

var head = document.getElementsByTagName('head')[0],
    script = document.createElement('script'),
    data;

script.type = 'text/javascript';

...

data = document.getElementById('chartBlock')
       .getElementsByTagName('script').item(0).innerHTML;

try {
  script.appendChild(document.createTextNode(data));      
} catch(e) {
  script.text = data;
}

head.insertBefore(script, head.firstChild);
head.removeChild(script);

重新触发加载事件

var event = new Event('load');

//place after script has been inserted into head
window.dispatchEvent(event);

使用上面的示例：

<强> curve.htm

<html>
   <head>
     <script src="File:///Temp/curveData.js"></script>
     <script>
        window.onload = init; //this will now fire
        function init() { alert('loaded'); }
     </script>
   </head>
   <body>
     <canvas id="chartCanvas" width="954" height="625"></canvas>
   </body>
</html>

<强> paper.htm

<html>
   <head>
     <title>Curve</title>
     <script>
        (function () {
           var xhr = new XMLHttpRequest(),
               event = new Event('load'),
               //since the onload event will have already been triggered
               //by the parent page we need to recreate it.
               //using a custom event would be best.
               head = document.getElementsByTagName('head')[0],
               script = document.createElement('script'),
               data;

           script.type = 'text/javascript';

           xhr.open('GET', 'curve.htm', true);
           xhr.onreadystatechange = function (){
               if (this.readyState !== 4) return;
               if (this.status !== 200) return;

               document.getElementById('chartBlock').innerHTML = this.responseText;

               data = document.getElementById('chartBlock')
                     .getElementsByTagName('script').item(0).innerHTML;
               //we're extracting the script containing the
               //onload handlers from curve.htm,
               //note that this will only cover the first script section..

               try {
                  // doesn't work on ie
                  script.appendChild(document.createTextNode(data));      
               } catch(e) {
                  script.text = data;
               }

               head.insertBefore(script, head.firstChild);
               head.removeChild(script);

               window.dispatchEvent(event);
               //once the scripts have been rendered,
               //we can trigger the onload event
           }
           xhr.send();
        })();
     </script>
   </head>
   <body>
     <div id="paper">
        <div id="border">
           <div id="chartBlock"></div>
           <div id="titleBlock"></div>
        </div>
     </div>
   </body>
</html>

window.onload不在嵌入式html文档中触发

2 个答案:

获取脚本并将其插入头部：

重新触发加载事件

使用上面的示例：