iframe相互间调用出错

我的需求是这样的，比如有两个页面A页面、B页面，A页面有一个单击按钮，点击的时候动态创建一个DIV，然后在DIV中嵌入iframe，在该iframe中加载B页面，在B页面有一个关闭按钮，单击可删除该iframe所在的DIV
代码如下one.html<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" language="JavaScript" src="one.js"></script>
<script type="text/javascript" language="JavaScript" src="jquery-1.7.2.js"></script>
</head>
<body>
<input type="button" id="create" value="open" onclick="openWindow()"/>
</body>
</html>
one.jsfunction openWindow() {
var main = document.createElement("div"); main.setAttribute("id", "showResult"); var content = document.createElement("iframe");
content.setAttribute("src", "two.html");
content.setAttribute("name", "showFrame"); main.appendChild(content);
document.body.appendChild(main); var test = "zhangsan";
var nextWindow;
window.frames["showFrame"].onload = function() {
nextWindow = document.getElementsByTagName('iframe')[0].contentWindow;
$(window.frames["showFrame"].document.getElementById("close")).click(function() {
$(nextWindow.parent.document.getElementById("showResult")).remove();
});
};
}
two.html<!DOCTYPE HTML>
<html id="yuyu1">
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" language="JavaScript">
window.nickName="zhangsan";
</script>
</head>
<body >
<div id="test" style="width: 400px; height: 300px; border: 1px solid red;">
<input type="button" id="close" value="close"/>
</div>
</body>
</html>第一次单击打开B页面后，在B页面中单击按钮可以删除该iframe所在的DIV，第二次单击A页面的按钮后就报错了
firefox中报的错NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIInlineEventHandlers.onload]
[在此错误处中断]  ...cementId(b[c].atl_id)||a.Ad.get(b[c].ad)))e.removePlugin("AdChoices"),b[c]._ms=!...

解决方案 »

  1.   

    改法1：
    function openWindow() {
        var main = document.createElement("div");
        main.setAttribute("id", "showResult");    var content = document.createElement("iframe");
        content.setAttribute("src", "test2.html");
        content.setAttribute("name", "showFrame");    main.appendChild(content);
        document.body.appendChild(main);    var test = "zhangsan";
        window.frames[0].onload = function() {//window.frames[0] 
    this.document.getElementById("close").onclick = function() {
    var div = parent.document.getElementById("showResult");
    div.parentNode.removeChild(div);
            };
        };
    }
    改法2：function openWindow() {
        var main = document.createElement("div");
        main.setAttribute("id", "showResult");    var content = document.createElement("iframe");
        content.setAttribute("src", "test2.html");
        content.setAttribute("name", "showFrame");    main.appendChild(content);
        document.body.appendChild(main);    var test = "zhangsan";
        content.onload = function() {//注意
    this.contentWindow.document.getElementById("close").onclick = function() {
    var div = parent.document.getElementById("showResult");
    div.parentNode.removeChild(div);
            };
        };
    }
    要注意，以下三者是有所区别的
    window.frames[0] //第一个iframe下的window对象 （泛指）
    window.frames['showFrame'] //iframe（name = showFrame）下的window对象 （特指）
    content (document.createElement("iframe"))  //一个iframe对象你程序的问题类似于闭包