Internet Explorerの場合、彼らは最初に
beforeprintイベントと
afterprintイベントを実装し、長い間、それらをサポートしていたのは彼だけでした。 その後、Mozillaは自身の
ブラウザの第6バージョンからこれらのイベントをサポートしました 。
非常に長い間 、Webkitは
実装を敢えてせず 、最終的には完全に破棄し、
matchMediaインターフェイスについて言及しました。 作者が理解できる限り、OperaはイベントまたはmatchMediaを実装しませんでしたが、この問題の不十分なグーグルは除外されません。
上記に基づいて、beforeprintメソッドとafterprintメソッドのサポートを追加する簡単なjQueryプラグインを読者と共有したいと思います。
/ **
* @著者Alexander Burtsev
* @descriptionイベントafterprintおよびbeforeprintのほぼクロスブラウザー処理
* @jQuery 1.7以降が必要
* /
$。 fn beforeprint = function （コールバック） {
$ （ this ）を 返します。 各 （ 関数 （ ） {
if （ ！ jQuery。isWindow （ this ） ）
帰る
if （ this。onbeforeprint ！== undefined ）
$ （ これ ） 。 on （ 'beforeprint' 、 callback ） ;
else if （ this。matchMedia ）
これ 。 matchMedia （ 'print' ） 。 addListener （コールバック） ;
} ） ;
} ;
$。 fn 。 afterprint = function （コールバック） {
$ （ this ）を 返します。 各 （ 関数 （ ） {
if （ ！ jQuery。isWindow （ this ） ）
帰る
if （ this。onafterprint ！== undefined ）
$ （ これ ） 。 on （ 'afterprint' 、 callback ） ;
else if （ this。matchMedia ）
これ 。 matchMedia （ 'media' ） 。 addListener （コールバック） ;
} ） ;
} ;
使用について
ユーザーが印刷するページがサイトにあるとします。 たとえば、
Googleマップを検討し
ます （Yandexマップを検討するのは愛国的ですが、特別なボタンをクリックするだけで別のページに印刷されます）。 Google Chromeで印刷する場合、次のようなものが表示されます。
Googleはそれを簡単かつ美しく行いました。 css media printを使用して、不要な要素をすべて削除し、残りの要素を印刷用に定型化して、正直に「この方法は間違った結果につながる可能性があるため、印刷リンクを使用した方が良い」と書いています。
グーグルは何を見逃しましたか？ 彼は地図をクロムで印刷したものの中央に配置しません。 オリジナルでは、モスクワの著者を中心に、ここでシフトされています。 さらに、画面の幅が大きいほど、オフセットが強くなります。 これは、Googleマップが印刷メディアの地図を更新するために単純なJavaScriptを実行しないという事実によるものです。
上記のプラグインを使用してバグを修正します。
//私のユースケース
（ 関数 （ ） {
var _links = $ （ 'link [media = "print"]' ） ;
$ （ウィンドウ）
。 beforeprint （ 関数 （ ） {
_links。 attr （ 'media' 、 'all' ） ;
地図。 updateAfterLayoutChange （ ） ;
} ）
。 afterprint （ 関数 （ ） {
_links。 attr （ 'media' 、 'print' ） ;
地図。 updateAfterLayoutChange （ ） ;
} ） ;
// updateAfterLayoutChange（）メソッドが作成され、マップリンクも作成されます
} ） （ ） ;
利益！
合計
これで、CSSだけでなくJavaScriptも使用して、印刷用にページの外観をカスタマイズできます。 IE8 +、Chrome、およびMozillaでテスト済み。
jQueryが1.7より古い場合、プラグインコードでon（）メソッドをbind（）に置き換えます。これで、プラグインはバージョン1.4.3+でサポートされるはずです。