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

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

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

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

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

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

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

$('.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();
});

Проблема заключается в том, что script, похоже, не ждет, пока окно загрузится. Он хочет напечатать момент появления окна. В результате, если я нажму "отменить" в диалоговом окне печати, он будет всплывать снова и снова, пока не загрузится окно. В первый раз, когда я попробовал распечатать, я получил пустую страницу. Возможно, это связано с тем, что окно не завершило загрузку.

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

http://www.mail-archive.com/[email protected]/msg18410.html

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

$('.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. Мне нужно проверить его и в некоторых других основных браузерах.

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

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

Ответ 3

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

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