8

ブラウザーから印刷 (または印刷プレビュー) が発生したときに、特定の DIV を動的に非表示にしようとしています。

通常のメディア用と印刷メディア用の 2 つのスタイル シートを用意することで、静的に簡単に区別できます。

しかし、さらに一歩進んで、特定の基準に基づいて印刷中に印刷スタイル シートがアクティブになったときに、いくつかの要素を動的に非表示にする必要があります。

それを簡単に解決する1つの方法は、印刷/印刷ビューを処理するためのDOMイベントを処理することです。次に、jQueryを使用して、非表示にする必要があるクラスのdisplay:noneを変更できますが、DOM印刷イベントが見つかりません!!

誰が解決策を知っていますか？

4

4 に答える 4

5

印刷イベントは必要ないと思います。@media printJavascript(?) 基準に基づいてスタイルを調整するだけです。ユーザーがページを印刷しよう@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 に答える
5

すべてのブラウザで印刷イベントをキャプチャできるわけではありません。「このページを印刷する」リンクを追加し、そのクリックイベントを使用して必要なことを達成することで、これに取り組むのを見てきました。

于 2008-10-10T12:24:59.540 に答える
4

これらの DIV に、印刷スタイルシートで非表示になっているクラスをタグ付けするだけです。

HTML

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

print.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 に答える