8

当从浏览器发生打印（或打印预览）时，我试图动态隐藏某些 DIV。

我可以通过两种样式表轻松区分静态，一张用于普通样式表，一张用于打印媒体：

但是我需要更进一步，当打印样式表在打印期间根据某些标准变为活动状态时动态隐藏一些元素

轻松解决它的一种方法是处理 DOM 事件以处理打印/打印视图，然后我可以使用 jQuery 更改显示：需要隐藏的类上的无，但我找不到 DOM 打印事件！！

有谁知道解决方案是什么？

4

4 回答 4

5

并非所有浏览器都允许您捕获打印事件。我已经看到通过添加“打印此页面”链接然后使用该单击事件来完成您需要的事情来解决这个问题。

于 2008-10-10T12:24:59.540 回答
5

我认为您不需要打印活动。您需要做的就是@media print根据您的 Javascript(?) 标准调整样式。当用户尝试打印页面时，@media print样式将应用并且您的样式将生效：

<html>
<head>
<style id="styles" type="text/css">
@media print { .noprint { display:none; } }
</style>
<script type="text/javascript">
var x = Math.random();

if (x > .5) {
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = '@media print { .maybe_noprint { display:none; } }';
    document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
</head>
<body>
<div class="noprint">This will never print.</div>
<span class="maybe_noprint">This may print depending on the value of x.</span>
</body>
</html>

如果您使用服务器端标准来确定打印的内容，那么只需吐出服务器端代码@media print来根据需要装饰类。此外，您可能需要考虑修改已经存在的现有类@media print，或者使用除 之外的其他内容构建新的 CSS innerHTML，我承认这对我来说很糟糕，但似乎在 Opera 9.6、Safari for Windows 3.1.2 中有效, IE 6 和 Firefox 2.0.0.17（我没有测试任何其他浏览器）。

于 2008-10-10T20:06:08.517 回答
4

只需使用隐藏在打印样式表中的类标记这些 DIV：

HTML

<div id='div19' class='noprint'>
  ...
</div>

打印.css

.noprint {
  display: none;
}

如果您事先不知道需要隐藏哪些元素，可以使用 javascript 为给定对象设置类：

Javascript

document.getElementById('div19').className='noprint';
于 2008-10-10T13:20:48.337 回答
1

IE 中有一个onbeforeprint事件。其他主流浏览器似乎不支持它。（我测试了 Firefox 3.0.3 和 Safari 3.1.2。）

于 2008-10-10T12:22:02.260 回答