javascript在设置document.body.innerHTML时为空_Javascript_Html_Dom

javascript在设置document.body.innerHTML时为空

javascript html dom

javascript在设置document.body.innerHTML时为空,javascript,html,dom,Javascript,Html,Dom,你好我目前正在从事一个项目，该项目将所需的打印到打印机上代码如下： var printContents = document.getElementById(id).innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; document.body.style.display = "none"; window

你好

我目前正在从事一个项目，该项目将所需的

打印到打印机上

代码如下：

    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";

此代码工作并打印所需的

，但在此之后，我需要再次放回上一页，因此我使用以下语句：

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

这将显示上一页，但“我的按钮”的功能消失了？！有人能给我解释一下发生了什么，这个问题有没有解决办法？提前谢谢

之所以会发生这种情况，是因为您已经删除了连接了事件的旧DOM，并将其替换为一个全新的、不同的DOM，它恰好具有相同的HTML

可能您采用这种方法是因为可打印区域是在运行时确定的。一个破坏性较小的解决方案可能是创建一个新的

，并将所需的标记复制到其中；然后在iframe上调用

print（）

。比如：

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

您还需要将任何CSS引用复制到

中

（注意这是伪代码，未经测试）

您的代码清除文档，然后放回存储在原始内容中的HTML，但此变量仅存储一个字符串，因此以前注册的所有事件处理程序都将消失

为什么不创建一个打印样式表并隐藏除要打印的内容之外的所有内容

<link rel="stylesheet" type="text/css" href="print.css" media="print">

当您重置innerHTML时，您无法恢复所有事件处理程序。当您创建全新的DOM元素时，它们将被删除

一个想法是在主体中有两个主div，一个是您的正常显示，另一个是您想要打印的内容。然后，您可以隐藏您不想显示的内容，如下所示：

<body>
    <div id="mainContent">main screen content goes here</div>
    <div id="printContent">generated print content goes here</div>
</body>

// hide main content
var mainDiv = document.getElementById("mainContent");
mainDiv.style.display = "none";
// put content to print in the print div and show it
var printDiv = document.getElementById("printContent");
printDiv.innerHTML = document.getElementById(id).innerHTML;
printDiv.style.display = "block";

// print
window.print();

// restore visibility
mainDiv.style.display = "block";
printDiv.style.display = "none;


主屏幕内容在此显示
生成的打印内容放在这里
//隐藏主要内容
var mainDiv=document.getElementById（“mainContent”）；
mainDiv.style.display=“无”；
//将要打印的内容放入“打印”div并显示
var printDiv=document.getElementById（“printContent”）；
printDiv.innerHTML=document.getElementById（id）.innerHTML；
printDiv.style.display=“块”；
//印刷品
window.print（）；
//恢复可见性
mainDiv.style.display=“块”；
printDiv.style.display=“无；

您也可以使用整个主体进行打印，并使用带有

media=“print”

的样式表来控制您要打印/不想打印的内容的可见性。

您可以在页面内的所有div中添加一个click事件，以便用户可以单击div。之后，向该div添加一个类，该类在printcss文件中定义。 css打印文件内部使用以下代码：

`*{display:none}
.printableDiv{display:block}`

要定义打印css文件，请使用以下代码：

（拉斐尔告诉过你）。

祝你好运

ohh，事情就是这样。不过有一个问题，我如何加载或保留旧dom？你能建议解决我的情况吗？非常感谢！！！