Использование JQuery, чтобы открыть всплывающее окно и распечатать - PullRequest
Новая
       16

Использование JQuery, чтобы открыть всплывающее окно и распечатать

14 голосов
/ 09 апреля 2010

Некоторое время назад я создал плагин лайтбокса, используя jQuery, который загружал бы URL, указанный в ссылке, в лайтбокс. Код действительно прост: 

$('.readmore').each(function(i){
    $(this).popup();
});

и ссылка будет выглядеть так: 

<a class='readmore' href='view-details.php?Id=11'>TJ Kirchner</a>

Плагин также может принимать аргументы для ширины, высоты, другого URL и других данных для прохождения.

Проблема, с которой я сейчас сталкиваюсь - это печать лайтбокса. Я настроил его так, чтобы лайтбокс имел кнопку печати в верхней части окна. Эта ссылка откроет новое окно и напечатает это окно. Все это контролируется плагином лайтбокса. Вот как выглядит этот код: 

$('.printBtn').bind('click',function() {
    var url = options.url + ( ( options.url.indexOf('?') < 0 && options.data != "" ) ? '?' : '&' ) + options.data;
    var thePopup = window.open( url, "Member Listing", "menubar=0,location=0,height=700,width=700" );
    thePopup.print();
});

Проблема в том, что скрипт не ожидает загрузки окна. Он хочет напечатать момент появления окна. В результате, если я нажму «отменить» в диалоговом окне печати, оно будет всплывать снова и снова, пока не загрузится окно. Когда я впервые попробовал распечатать, я получил пустую страницу. Это может быть из-за того, что окно не завершило загрузку.

Мне нужно найти способ изменить предыдущий блок кода, чтобы дождаться загрузки окна, а затем распечатать. Я чувствую, что должен быть легкий способ сделать это, но я еще не нашел это. Либо так, либо мне нужно найти лучший способ открыть всплывающее окно и распечатать его из сценария лайтбокса в родительском окне, не меняя код веб-страницы во всплывающем окне.

Ответы [ 3 ]

27 голосов
/ 09 апреля 2010

Вы должны поместить функцию печати в файл view-details.php и вызывать ее после загрузки файла, используя <body onload="window.print()"> или $(document).ready(function () { window.print(); });

7 голосов
/ 09 апреля 2010

Понял! Я нашел идею здесь

http://www.mail-archive.com/discuss@jquery.com/msg18410.html

В этом примере они загрузили пустое всплывающее окно в объект, клонировали содержимое отображаемого элемента и добавили его в тело объекта. Поскольку я уже знал, что такое содержимое view-details (или любой страницы, которую я загружаю в лайтбокс), мне просто нужно было клонировать этот контент и загрузить его в объект. Затем мне просто нужно было распечатать этот объект. Окончательный результат выглядит так: 

$('.printBtn').bind('click',function() {
    var thePopup = window.open( '', "Customer Listing", "menubar=0,location=0,height=700,width=700" );
    $('#popup-content').clone().appendTo( thePopup.document.body );
    thePopup.print();
});

У меня был один небольшой недостаток в том, что таблица стилей, которую я использовал в view-details.php, использовала относительную ссылку. Мне пришлось изменить его на абсолютную ссылку. Причина в том, что с окном не было связано URL, поэтому оно не имело относительной позиции для рисования.

Работает в Firefox. Мне нужно проверить это и в некоторых других основных браузерах.

Я не знаю, насколько хорошо это решение работает, когда вы работаете с изображениями, видео или другими решениями, интенсивно использующими процессы. Хотя в моем случае это работает довольно хорошо, так как я просто загружаю таблицы и текстовые значения.

Спасибо за ввод! Вы дали мне несколько идей, как это обойти.

0 голосов
/ 09 апреля 2010

Вы уверены, что не можете изменить HTML во всплывающем окне?

Если можете, добавьте тег <script> в end HTML-кода всплывающего окна и вызовите window.print() внутри него. Тогда он не будет вызываться до тех пор, пока не загрузится HTML.

...