打开一个新的 javascript 窗口(.open)及其 CSS 样式 [英] Open a new javascript window(.open) along with its CSS styling
问题描述
我正在尝试让此功能在我正在处理的项目的网站上运行.此函数的目的是仅(物理上)打印子 div 的内容，该子 div 巧合地称为选择器 #content.
这是我到现在为止的一点点:
当一个人点击打印"超链接时会触发该函数.新窗口将加载从另一个 HTML 文档解析的 #content div 的内容:
<br/><div id="Algemeen"><h3>代数信息</h3><fieldset id="个人资料"><img id="male" src="./images/Pixers/male_icon.jpg"></img><img id="female" src="./images/Pixers/female_icon1.jpg"></img></fieldset><div id ="leftbox"><div id ="veldbox"><label>BSN:</label>$!person.bsn</div><div id ="veldbox"><label>Voornaam:</label>$!person.first_name</div><div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div><div id ="veldbox"><label>Geslacht:</label>$!person.gender</div><div id ="veldbox"><label>Woonadres:</label>$!person.address</div><div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div><div id ="veldbox"><label>省:</label>$!person.province</div><div id ="veldbox"><label>邮政编码:</label>$!person.zipcode</div><div id ="veldbox"><label>电话.数字 thuis:</label>$!person.h_number</div><div id ="veldbox"><label>手机号码:</label>$!person.mobile_nr</div><div id ="veldbox"><label>Burgerlijke 站:</label>$!person.m_status</div><div id ="veldbox"><label>land van herkomst:</label>$!person.origin</div>
<div id="rightbox"><div id ="veldbox"><label>Naam 实例:</label></div><div id ="veldbox"><label>Adres 实例:</label></div><div id ="veldbox"><label>邮政编码实例:</label></div><div id ="veldbox"><label>电话.实例:</label></div><div id ="veldbox"><label>传真实例:</label></div><div id ="veldbox"><label>电子邮件实例:</label></div><div id ="veldbox"><label>网站实例:</label></div><div id ="veldbox"><label>-:</label></div><div id ="veldbox"><label>-:</label></div><div id ="veldbox"><label>-:</label></div>
它只是不会加载样式.所有的内容都会在左上角被裁剪出来.我试过通过 JS 链接 CSS，或者按照另一个页面的建议将其放在页面的头部.我当然可能做错了.我还没有真正尝试过用 JQuery 解决这个问题，所以如果你有任何其他解决方案可以帮助我解决我的问题，我很高兴并愿意接受一些关于它们的建议.
提前致谢！
在打开的窗口中构建一个完整的 HTML 页面并在那里引用您的 CSS 文件:
var win = window.open('','printwindow');win.document.write('<html><head><title>打印！</title><link rel="stylesheet" type="text/css" href="styles.css">;</head><body>');win.document.write($("#content").html());win.document.write('</body></html>');赢.打印()；赢.关闭()；I'm trying to get this function to work on the website of a project I'm working on. The purpose of this function is to only (physically) print the contents of a child div which is coincidentally referred to as selector #content.
Here's the little bit I've got 'till now:
<script>
function printContent() {
window.open().document.write($("#content").html());
window.print();
window.close();
}
</script>
The function is fired when a person clicks on a "print" hyperlink. The new window will load the contents of the #content div which is parsed from another HTML document:
<div id="content">
<br/>
<div id="Algemeen">
<h3>Algemene informatie</h3>
<fieldset id="profile">
<img id="male" src="./images/Pixers/male_icon.jpg"></img>
<img id="female" src="./images/Pixers/female_icon1.jpg"></img>
</fieldset>
</div>
<div id ="leftbox">
<div id ="veldbox"><label>BSN:</label>$!person.bsn</div>
<div id ="veldbox"><label>Voornaam: </label>$!person.first_name</div>
<div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div>
<div id ="veldbox"><label>Geslacht:</label>$!person.gender</div>
<div id ="veldbox"><label>Woonadres:</label>$!person.address</div>
<div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div>
<div id ="veldbox"><label>Provincie:</label>$!person.province</div>
<div id ="veldbox"><label>Postcode:</label>$!person.zipcode</div>
<div id ="veldbox"><label>Tel. nummer thuis:</label>$!person.h_number</div>
<div id ="veldbox"><label>Mobiel nummer:</label>$!person.mobile_nr</div>
<div id ="veldbox"><label>Burgerlijke Stand:</label>$!person.m_status</div>
<div id ="veldbox"><label>land van herkomst:</label>$!person.origin</div>
</div>
<div id="rightbox">
<div id ="veldbox"><label>Naam instantie:</label></div>
<div id ="veldbox"><label>Adres instantie:</label></div>
<div id ="veldbox"><label>Postcode instantie:</label></div>
<div id ="veldbox"><label>Tel. instantie:</label></div>
<div id ="veldbox"><label>Fax instantie:</label></div>
<div id ="veldbox"><label>E-mail instantie:</label></div>
<div id ="veldbox"><label>Website instantie:</label></div>
<div id ="veldbox"><label>-:</label></div>
<div id ="veldbox"><label>-:</label></div>
<div id ="veldbox"><label>-:</label></div>
</div>
</div>
It just won't load the styling along with it. All the contents will all just be cropped up in the top left corner. I've tried linking the CSS through JS or by just putting it in the head of the page as suggested on another page. I could be doing this wrong of course. I haven't really tried figuring this out with JQuery yet, so if you have any other solutions that might help me with my problem, I'm happy and open to receive some advice about them.
Thanks in advance!
Build a complete HTML page in the opened window and reference your CSS-file there:
var win = window.open('','printwindow');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
win.document.write($("#content").html());
win.document.write('</body></html>');
win.print();
win.close();
这篇关于打开一个新的 javascript 窗口(.open)及其 CSS 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
