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

【问题标题】：Passing a JavaScript function to run in a new window object传递 JavaScript 函数以在新窗口对象中运行
【发布时间】：2015-03-17 23:53:41
【问题描述】：

假设我有一个 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 变量中包含一个函数文字，但这似乎不是一个可行的选择。

【问题讨论】：

喜欢doc.getElementById('copy-all').onclick = function() { alert('hi') };?
而不是使用 .write 使用 .insertAdjacentHTML;

标签： javascript jquery html new-window

【解决方案1】：

使用 jQuery 我会这样做：

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

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

【讨论】：

【解决方案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/

【讨论】：