打开一个新的javascript窗口（.open）及其CSS样式 [英] Open a new javascript window(.open) along with its CSS styling
问题描述
我想让这个函数在我正在开发的项目的网站上工作。这个函数的目的是只（在物理上）打印一个孩子的div的内容，这是巧合的选择器#content。
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>
当用户单击打印超链接时，会触发此函数。新窗口将加载从另一个HTML文档解析的#content div的内容：
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>
它不会加载样式。所有的内容都将被剪裁在左上角。我试过链接CSS通过JS或只是把它放在页面的头部，如建议在另一个页面。我当然可以做错了。我还没有真正尝试用JQuery来解决这个问题，所以如果你有任何其他解决方案，可以帮助我的问题，我很高兴和开放，收到一些关于他们的建议。
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.
现在因为我只是一个目前教育水平很低的学生，我希望你们中的一个帮助我。
Now because I'm only just a student whose current education is just dismal, I'd like for one of you guys to help me out. Seems it'll be the most help I'll get here.
提前感谢！
推荐答案
在打开的窗口中构建一个完整的HTML页面，并引用您的CSS文件：
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屋！
