设置document.body.innerHTML时,javascript无效

Question

美好的一天.

我目前正在开发一个打印所需<div>打印机的项目.

这是代码:

    var printContents = document.getElementById(id).innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;
    document.body.style.display = "none";

    window.print();

    document.body.innerHTML = originalContents;
    document.body.style.display = "block";

此代码工作并打印所需的<div>,但之后我需要再次放回上一页,所以我使用了这个语句:

document.body.innerHTML = originalContents;
document.body.style.display = "block";

这显示了上一页,但我的按钮的功能已经消失了？!有人可以向我解释发生了什么,是否有解决这个问题的方法？提前致谢!

Answer 1

之所以发生这种情况,是因为你已经删除了有事件连接到它的旧DOM,并用一个全新的,不同的DOM替换它,它恰好具有相同的HTML.

大概是你采用这种方法,因为可打印区域是在运行时确定的.一个破坏性较小的解决方案可能是创建一个新的<iframe>并将所需的标记复制到其中; 然后print()在iframe上调用.就像是:

var printElement = function(element) {
    var frame = document.createElement('iframe');
    document.appendChild(frame);
    frame.contentDocument.innerHTML = element.innerHTML;
    frame.contentWindow.print();
    document.removeChild(frame);
};

您还需要将任何CSS引用复制到<iframe>.

(注意这是伪代码而未经过测试)