Как эффективно контролировать, какая часть моей веб-страницы печатается при использовании jQuery? - PullRequest
Новая
       18

Как эффективно контролировать, какая часть моей веб-страницы печатается при использовании jQuery?

0 голосов
/ 30 августа 2011

Я работаю над страницей HTML (без серверных сценариев) с JavaScript.

Моя страница отображает каскадное меню статей для пользователя.Когда пользователь выбирает статью, она отображается для пользователя.

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

Я сделал следующее:

1) Я обернул все разделы моей страницы в DIV с помощью class='nonPrinterContainer'.Я создал пустой DIV с class='printerContainer'.Я добавил jQuery JavaScript, который выполняет следующие действия при отображении новой статьи:

1) Установите внутренний HTML-код printerContainer DIV в пустую строку.
2) Скопируйте HTML для выбранногоtitle и article к внутреннему HTML printerContainer DIV.

Наконец, я добавил на страницу таблицу стилей CSS: 

<link type='text/css' rel='Stylesheet' media='print' href="styles/print.css" />

.nonPrinterContainer { display:none; }
.printerContainer { display: block; }

Сначала это показалось великолепным.Я открывал страницу, нажимал на статью, нажимал на печать, и печатались только заголовок и статья.Однако, к моему ужасу, я обнаружил, что когда пользователь нажимает на одну статью, а затем на другую таким образом, что меню исчезает, а затем снова появляется (часть логики моей страницы), меню становится частью печатной страницы.

Я открыл страницу в FireBug и воспроизвел ошибку.Когда я просматриваю измененный JavaScript-код разметки в FireBug, я вижу, что, как и ожидалось, в .printerContainer.

отображаются только заголовок и текст статьи. Как это может быть, если все остальное (включая меню) можно заключить в DIV с помощью display:none в таблице стилей печати, и все же меню иногда печатается.Я также попытался добавить #menu { display:none; } к моей таблице стилей печати, но безрезультатно.

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

Как я могу лучше контролировать, какая часть моей страницы, управляемой JavaScript, печатается?

Ответы [ 2 ]

1 голос
/ 30 августа 2011

Одна техника, к которой я привык, имела скрытый Ифраме.Скопируйте содержимое, которое вы хотите, в Iframe, затем вместо этого вызовите window.print() из iframe.

0 голосов
/ 30 августа 2011

Спасибо за ответ, @ Диодей. Я думаю, что, возможно, нашел более подходящее решение для моей конкретной проблемы.

На моей странице у меня было меню в div с классом nonPrinterContainer. Тем не менее, я неоднократно вызывал jQuery.show() и jQuery.hide() в меню в моем скрипте. Это как-то перекрывает мою таблицу стилей печати. ​​

Решение, которое я обнаружил, заключается во вложении меню в отдельный div с классом nonPrinterContainer следующим образом:

* * 1010

вместо 

<div class='nonPrinterContainer' id='menu'>
</div>
...