在新的 window 对象中将 JavaScript 函数传递给运行

Question

假设我有一个 HTML 字符串，它使用以下方法传递给新的 window/browser：

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 字符串传递给新的 window 并呈现，将会有一个按钮 (#copy-all) 以及所有内容。

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

Answer 1

对于 jQuery 我会这样做：

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

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

Answer 2

不使用 jQuery 的变体：

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

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

在新的 window 对象中将 JavaScript 函数传递给运行

Passing a JavaScript function to run in a new window object

javascript

jquery

html

new-window

在新的 window 对象中将 JavaScript 函数传递给 运行

Passing a JavaScript function to run in a new window object

javascript

jquery

html

new-window

在新的 window 对象中将 JavaScript 函数传递给运行