Bagaimanakah Anda Boleh Melaksanakan Fungsi Cetakan Merentas Semua Penyemak Imbas?

Persamaan Penyemak Imbas Rentas untuk onbeforeprint() dan onafterprint() IE

Pembangun web sering menghadapi cabaran untuk melaksanakan fungsi pencetakan merentas berbilang penyemak imbas . Walaupun Internet Explorer menyediakan acara onbeforeprint() dan onafterprint() yang mudah, penyemak imbas lain memerlukan pendekatan yang lebih mantap.

Window.matchMedia for Cross-Browser Detection

Moden pelayar seperti Chrome, Firefox dan Internet Explorer 10 menawarkan sokongan untuk window.matchMedia. API ini membolehkan pengesanan pertanyaan media CSS berkuat kuasa, seperti percetakan. Dengan menggabungkan window.matchMedia dengan window.onbeforeprint/window.onafterprint, penyelesaian silang penyemak imbas boleh dicapai.

Pendengar Acara untuk Pengesanan Cetakan

Menggunakan kod berikut coretan, pembangun boleh mengesan peristiwa cetakan dalam kebanyakan penyemak imbas utama:

<code class="javascript">if ('matchMedia' in window) {
    // Chrome, Firefox, and IE 10 support mediaMatch listeners
    window.matchMedia('print').addListener(function(media) {
        if (media.matches) {
            beforePrint();
        } else {
            // Fires immediately, so wait for the first mouse movement
            $(document).one('mouseover', afterPrint);
        }
    });
} else {
    // IE and Firefox fire before/after events
    $(window).on('beforeprint', beforePrint);
    $(window).on('afterprint', afterPrint);
}</code>

Sumber Tambahan

Untuk mendapatkan cerapan lanjut dan contoh kod, rujuk sumber berikut:

• [Mengesan Permintaan Cetakan dengan JavaScript](http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/)

Oleh memanfaatkan window.matchMedia dan pendengar acara, pembangun web boleh melaksanakan fungsi pencetakan yang serasi dengan pelbagai pelayar, memastikan pengalaman pencetakan yang lancar untuk pengguna.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Melaksanakan Fungsi Cetakan Merentas Semua Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!