Question

当我们在B.js中追加孩子时，有一个未定义的错误！

//sample code    
//A.js
this.node = document.getElementById("area");
window.open("B.html");

//B.js
document.getElementById("area").appendChild(window.opener.node);

Answer 1

B.js 中的document与 A.js 中的{em> #document 不同。这意味着window.opener.node是来自其他 #document 的节点，因此您必须先在其上调用document.importNode才能在此处使用 p>

// B.js
var node = document.importNode(window.opener.node, /* deep */ true);
document.getElementById("area").appendChild(node);

请注意，这个新的节点是一个副本，如果你有大型结构，你可能也希望销毁原件。

如果您想支持已经达到使用寿命的旧IE浏览器，这里有一些垫片

使用<div>并设置innerHTML

if (!document.importNode) {
    document.importNode = function (node, deep) {
        var wrapper_old = node.ownerDocument.createElement('div'),
            wrapper_new = document.createElement('div');
        wrapper_old.appendChild(node.cloneNode(!!deep));
        wrapper_new.innerHTML = wrapper_old.innerHTML;
        return wrapper_new.removeChild(wrapper_new.firstChild);
    };
}

它应该适用于<div>

的孩子

从您的新 #document 中调用cloneNode（我还没有对其进行过测试）

if (!document.importNode) {
    document.importNode = function (node, deep) {
        return Node.prototype.cloneNode.call(node, !!deep);
    };
}

假设它有效，它将适用于更多节点，但会删除 id属性。

自定义导入/克隆功能（这将克隆 id属性）

if (!document.importNode) {
    document.importNode = function (node, deep) {
        var e, i, a;
        if (node.nodeType === 3) // #text
            return document.createTextNode(node.data);
        if (node.nodeType === 8) // #comment
            return document.createComment(node.data);
        if (node.nodeType !== 1) // #document/other
            throw new TypeError('Unsupported nodeType: ' + node.nodeType);
        // Element
        e = document.createElement(node.tagName);
        a = node.attributes;
        for (i = 0; i < a.length; ++i) {
            e.setAttribute(a[i].name, a[i].value);
        }
        if (deep)
            for (i = 0; i < node.childNodes.length; ++i) {
                e.appendChild(clone(node.childNodes[i]));
            }
        return e;
    };
}

Answer 2

肯定会得到并且未定义错误。因为有2个不同的文件。新打开的窗口无法访问其他HTML元素（例如A.html）。

具有id区域的元素应该出现在HTML中。否则会产生未定义的错误。你可以试试iframe，你可以访问iframe的元素，你可以将数据附加到节点。

window.frames['iframe'].document.getElementsByTagName('body')

Answer 3

以下在Chrome和Firefox中运行良好。请注意，“area”div已从A.html中删除

A.html

<html>
<body>
<div id="area">test</div>
<script>
this.node = document.getElementById("area");
window.open("B.html");
</script>
</body>
</html>

和B.html

<html>
<body>
<div id="area1"></div>
<script>
document.getElementById("area1").appendChild(window.opener.node);
</script>
</body>
</html>

如何将domnode传递给window.open创建的子窗口

3 个答案: