设置 document.body.innerHTML 时 javascript 无效

发布于 2025-01-07 00:27:50 字数 711 浏览 0 评论 0原文

再会。

我目前正在开发一个项目，该项目将所需的

打印到打印机。

这是代码：

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

这显示了上一页，但 < strong>我的按钮功能消失了？！有人可以向我解释发生了什么以及这个问题有解决办法吗？提前致谢！

原文

Good day.

I am currently working on a project that prints a desired <div> to a printer.

Here is the code:

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

This code works and prints the desired <div>, but after that I need to put back the previous page again so I used this statement:

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

This displays the previous page but the functionalities of my buttons are gone?! Can someone explain to me what happened and is there a solution to this problem? Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦中楼上月下 2025-01-14 00:27:50

发生这种情况是因为您已经清除了连接了事件的旧 DOM，并将其替换为一个全新的、不同的 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 引用复制到中。

（请注意，这是伪代码，并且未经过测试）

This is happening because you've wiped out the old DOM which had events wired up to it, and replaced it with a totally new, different DOM that just happens to have the same HTML.

Presumably you're taking this approach because the printable zone is determined at runtime. A less-destructive solution might be to create a new <iframe> and copy the desired markup into that; then invoke print() on the iframe. Something like:

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

You'll also need to copy over any CSS references into the <iframe>.

(note this is pseudo-code and not tested)

回复收藏 0 原文

晌融 2025-01-14 00:27:50

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

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

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

Your code clears the document and then puts back the HTML stored in originalContents, but this variable stores only a string, so all previously registered event handlers are gone.

Why don't you create a print stylesheet and hide everything except the content that you want to print?

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

回复收藏 0 原文

慕巷 2025-01-14 00:27:50

当您重置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;

您也可以仅使用整个正文进行打印，并使用带有 media="print" 的样式表来控制内容的可见性您想/不想打印。

When you reset the innerHTML, you don't get all your event handlers back. They are wiped out when you create entirely new DOM elements.

One idea would be to have two master divs in the body, one that is your normal display and one that is what you want to print. You can then hide whichever one you don't want to display like this:

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

You could also just use the whole body for printing and use a stylesheet with media="print" to control the visibility of the things you do/don't want to print.

回复收藏 0 原文

天气好吗我好吗 2025-01-14 00:27:50

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

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

要定义打印 css 文件，请使用以下代码：
（拉斐尔已经告诉过你了）。
祝你好运

You can add a click event to all dives inside your page so that user can click the div.
after that add a class to that div which the class is defined within the print CSS file.
inside css print file use the following code:

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

to define a print css file use this code :
<link rel="stylesheet" type="text/css" href="print.css" media="print"> (which Rafael has told you ).
good luck

回复收藏 0 原文

~没有更多了~