Как использовать Javascript для всплывающего нового окна с почти тем же HTML, что и его родительское окно

Question

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

Для этого можно использовать javascript?

Answer 1

Вы можете передать дополнительный параметр в URL текущей страницы и открыть его в новом окне, например:

window.open(document.location.href + "?print=true");

Затем можно прочитать параметр URL-адреса в JavaScript и выполнить необходимые скрытия и изменения CSS, чтобы сделать документ удобным для печати.

Кстати, почему: почему бы не использовать CSS только для печати, который сделает это за вас? Тогда все, что вам нужно сделать в вашем коде:

window.print ();

А в вашем документе ГОЛОВА:

<link rel="stylesheet" href="yourcssfile.css" media="print" /> 

И CSS позаботится о том, чтобы страница выглядела так, как вы хотите при печати. См. эту статью для получения дополнительной информации о печати в CSS.

Answer 2

Да, можно настроить код javascript для этого, что-то вроде:

window.open('myPage.html')

getElementById('<someid>').style.display = none

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

Обычно, чтобы добавить таблицу стилей печати, вы устанавливаете такую ​​ссылку:

<link rel="stylesheet" type="text/css" media="print" href="myPrintStyles.css"/>