2012-06-21 3 views
22

Возможно ли инициировать событие javascript, когда пользователь печатает страницу? Я хотел бы удалить зависимость от библиотеки javascript, когда пользователь выбирает печать страницы, так как библиотека отлично подходит для экрана, но не для печати.Как запустить javascript при печати?

Любая идея, как достичь этого?

+1

Что именно вы пытаетесь достичь?Что вы подразумеваете под «библиотека отлично подходит для экрана, но не для печати»? –

+1

Что делает библиотека JavaScript для печати? В любом случае браузер не вызывает никаких скриптов страниц. – Pointy

+0

использование окно.отпечатать функцию, окно.неотпечатка, window.onbeforeprint –

ответ

24

Для тех, кто спотыкаясь на этот ответ от Google, позвольте мне попытаться разобраться:

Как заметил Аджай, есть два события, которые увольняются для печати, но они не очень хорошо поддерживаются; насколько я читал, они поддерживаются только в браузерах Internet Explorer и Firefox (6+). Эти события - window.onbeforeprint и window.onafterprint, которые (как и следовало ожидать) будут срабатывать до и после задания печати.

Однако, как указано в ссылке Джо (https://stackoverflow.com/a/9920784/578667), это не совсем так, как это реализовано во всех случаях. В большинстве случаев оба события срабатывают перед диалогом; в других случаях выполнение сценария может быть остановлено во время диалога печати, поэтому оба события могут срабатывать одновременно (после завершения диалога).

Для получения дополнительной информации (и поддержки браузера) для этих двух событий:

https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeprint

https://developer.mozilla.org/en-US/docs/DOM/window.onafterprint

Короткий ответ: если вы надеетесь мешать потоку печати, не , Если вы надеетесь запустить код после печати, он не будет работать, как вы хотите; ожидать плохой поддержки браузера и стараться грамотно деградировать.

+2

Кроме того, если вы пытаетесь изменить макет или отображение для печати, вы должны сделать это с помощью таблицы стилей печати (или правил '@media print' в вашем css), а не JavaScript –

+0

@TomPietrosanti Я полностью согласен, но есть некоторые вещи, которые вы не можете сделать с CSS (например, изменить порядок элементов). См. [Мой вопрос] (http://stackoverflow.com/questions/25030208/dom-manipulation-on-print-only). – chharvey

+0

Вы можете изменить порядок (в степени), если вы можете использовать flexbox, но в противном случае это правда. Если вам не нужен JS, я бы избегал этого - это может привести к некоторым очень странным ошибкам. –

0

если у вас есть сценарий, где и хочет сделать что-то прежде, чем диалог печати появляется или только после того, как документ будет отправлен на использование очереди печати можно использовать приведенные ниже события window.onafterprint, window.onbeforeprint

+0

Я пробовал в Chome, но это не работает. Хотя это может быть в IE, но IE не подходит мне здесь. Благодарю. http://stackoverflow.com/a/9920784/578667 – Joe

+1

С небольшим количеством hackerydoo вы можете заставить его работать в браузерах на основе webkit: http://tjvantoll.com/2012/06/15/detecting-print- request-with-javascript/Единственное, что осталось от Opera, но предприимчивый человек, вероятно, может придумать для этого полиполк/взлома. –

9

Это можно сделать путем перезаписи, например, window.onbeforeprint.

Используя Chrome, я обнаружил, что работает более загадочный window.matchMedia("print").addListener(function() {alert("Print Dialog open.")}).

Эта спорная функция может использоваться, чтобы удержать пользователей от печати страницы.

Я столкнулся с ним в первый раз на Scribd. Там, если вы откроете диалоговое окно печати с помощью команды меню, содержимое страницы будет выделено серым цветом, и появится сообщение с предупреждением о том, почему вы не можете распечатать страницу. (Примечание для полного анализа: на этой странице control-p также переопределяется, поэтому вы не можете использовать его, чтобы открыть диалог печати вообще. Кроме того, есть CSS-код @media для вывода принтера, который скрывает содержимое, все тестируются в Firefox).

+0

В Chrome ваше «арканное» решение действительно работает, но это происходит четыре раза. – chharvey

+2

Я предполагаю, что если у вас есть несколько стилей печати или стилей печати, они будут срабатывать столько, сколько у вас есть. Когда я запускаю этот код без стилей печати, он запускается один раз. –

0

Для тех, кто придет сюда искать вариант с помощью Bootstrap, как и я, я использовал следующий код для достижения этого при нажатии кнопки печати. Это не работы при нажатии клавиши CTRL + P.

$("#print_page").click(function(){ 
$("#print_section").addClass('visible-print-block'); 
window.print(); 
$("#print_section").removeClass('visible-print-block');}) 

Вам нужно добавить скрытую-печать, чтобы все, что вы не хотите печатать, а затем добавить ID (или класс, если у вас есть больше, чем один раздел) print_section на бит, который вы хотите напечатать! Немного взломанный, но он работает!

+0

Вы также можете [переопределить CTRL + P] (https://stackoverflow.com/a/3680946/479156), чтобы запустить тот же код/​​функцию, но это все еще не является 100% -ным доказательством, так как есть больше способов печати. – Ivar

Смежные вопросы