我正在尝试使用JavaScript将两个HTML文档嵌入另一个。我遇到的问题是，Onload事件不会在嵌入式文档上发射。
paper.htm具有多个DIV标签，应包含曲线。
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文档（curve.htm）的身体标签中
用jQuery尝试：
<script>
$(function () {
$("#chartBlock").load("curve.htm");
$("#titleBlock").load("titleblock.htm");
});
</script>
用html尝试：
<body onload="init()">
任何其他要研究的想法都将不胜感激。谢谢
因为不会加载文档...
您在做什么可以通过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函数的成功回调来执行您想做的任何事情，如果内容插入文档中。
您仍然可以在不使用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);
retrigger负载事件
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>