CSS не работает при проверке предварительного просмотра
1) У меня есть форма, и я показываю предварительный просмотр этой формы на следующей вкладке. Я установил немного CSS, но после нажатия на кнопку предварительного просмотра CSS не отражается на полях.
2) Есть ли другой способ отобразить вкладку в новой вкладке, установленной в открывшемся окне?
/*form preview*/
function PrintPreview() {
var toPrint = document.getElementById('from_privew');
var popupWin = window.open('', '_blank', 'width=1000,height=1000,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body>')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</div></body></html>');
popupWin.document.close();
}
@media print{
input[type="text"],
input[type="email"] {
border: 1px solid #000;
padding: 05px;
border-radius: 05px;
}
input[type="submit"],
a {
background: #0088cc;
border: none;
border-radius: 05px;
padding: 08px 25px;
color: #fff;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="from_privew">
<form>
<input type="text" name="name">
<input type="email" name="email">
<input type="submit" name="submit">
<a href="#" onclick="PrintPreview()">Preview</a>
</form>
</div>
1 ответ
Решение
Поместите свой CSS в отдельный файл Print.css
и удалите @media print
:
input[type="text"],
input[type="email"] {
border: 1px solid #000;
padding: 05px;
border-radius: 05px;
}
input[type="submit"],
a {
background: #0088cc;
border: none;
border-radius: 05px;
padding: 08px 25px;
color: #fff;
}
Затем измените ваш JavaScript, чтобы включить ссылку на этот файл:
function PrintPreview() {
var toPrint = document.getElementById('from_privew');
var popupWin = window.open('', '_blank', 'width=1000,height=1000,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('\
<html> \
<head> \
<title>::Print Preview::</title> \
<link rel="stylesheet" type="text/css" href="Print.css" media="screen"/> \
<link rel="stylesheet" type="text/css" href="style.css" media="screen"> \
</head> \
<body> \
<div>')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('\
</div> \
</body> \
</html>');
popupWin.document.close();
}
Что касается второй части, будет ли страница открыта в новом окне или новой вкладке, зависит от браузера (или настроек браузера). Поэтому я думаю, что вы ничего не можете с этим поделать.