Question

假设我有一个HTML字符串，可以使用以下方法传递给新窗口/浏览器：

var htmlStr =
        "<div><button id='copy-all'>Copy all contents</button></div>" +
        "<div id='contents-container'>" +
        "    (lots of contents are placed here...) " +
        "</div>"
   , newWin = window.open("", "Test", "width=1000, height=800, scrollbars=1, resizable=1")
   , doc = newWin.document;

doc.write(htmlStr);

如您所见，HTML字符串传递到新窗口并呈现后，会有一个按钮（#copy-all）以及所有内容。

问题是 - 如何将JavaScript函数（使用或不使用jQuery）附加到按钮，使我能够操作放置在div（#contents-container）元素内的DOM？我尝试将函数文字作为htmlStr变量的一部分包含在内，但它似乎不是一个可行的选项。

Answer 1

使用jQuery，我会这样做：

$('#copy-all', doc).on('click', function() {
    $('#contents-container', doc).html('test');
});

这是一个有效的JSFiddle： http://jsfiddle.net/qd8dybg0/2/（不要忘记禁用弹出窗口拦截器）

Answer 2

Mario A's answer which uses jQuery的不使用jQuery的变体：

doc.getElementById("copy-all").onclick = function(event) {
    doc.getElementById("contents-container").innerHTML = 'test';
};

还有一个演示JSFiddle（禁用弹出窗口阻止程序以查看演示）：http://jsfiddle.net/kv2p8dwe/2/

传递JavaScript函数以在新窗口对象中运行

2 个答案: