使用JavaScript将父窗口的CSS添加到子窗口
[英]Adding parent window's CSS to child window using javascript
问题描述
I'm trying to generate a pop-up window with a printable version of a small portion of the main window. 
我正在尝试生成一个弹出窗口，其中包含主窗口一小部分的可打印版本。 I'm using Meteor, so the HTML and CSS files are all programmatically generated. 我正在使用Meteor，因此HTML和CSS文件都是以编程方式生成的。
What I'd like to do is use Javascript to read all the linked CSS files in the parent window and append them to the child window. 我想做的是使用Javascript读取父窗口中所有链接的CSS文件，并将它们附加到子窗口中。
var childWindow = window.open("", "_blank", "width=350,height=150");
var childDoc = childWindow.document;
var childHead = childDoc.getElementsByTagName("head")[0];
$('link').each(function(index,element){
childLink = childDoc.createElement("link");
childLink.rel = "stylesheet";
childLink.href = element.href;
childHead.appendChild(childLink);
});
childDoc.write(myHtml);
But its not working. 但是它不起作用。 It appears that childHead is referring to the head of the parent document, not the child. 看来childHead指的是父文档的头，而不是子文档的头。 I'm not sure if this is a security thing I'm running afoul of or just have a mistake in the code. 我不确定这是否是我所担心的安全问题，或者只是在代码中有错误。
Any ideas what I'm doing wrong? 有什么想法我做错了吗？
2 个解决方案
解决方案1
1 2013-02-18 17:27:32
I'm doing a very similar thing on one of my pages. 我在其中一页上做着非常相似的事情。 I just use the 'parent' page to write everything and it works fine. 我只是使用“父”页面来编写所有内容，并且工作正常。 Here is how it works for me. 这是对我有效的方式。 See this fiddle in action. 看到这个小提琴的行动。 You'll notice that it only prints the stuff from the printMe div. 您会注意到，它仅打印printMe div中的内容。 Also, the printed page has all the same exact scripts and styles that the parent page does. 同样，打印的页面具有与父页面完全相同的脚本和样式。
some stuff NOT to print
<div id="printMe" class="ui-selectable-helper">
I should be printed, but not the other stuff.
</div>
more stuff NOT to print
$(function(){
var printWindow = window.open('', 'printWin', 'height=600, width=900, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
//create a new HEAD with the exact same content as the main page
var writeMe = ('<body><head>' + $('head').html() + '</head><html>');
//grab the content of the printMe div and use it on the print page
writeMe += ("<div>" + $('#printMe')[0].outerHTML + "</div>");
writeMe += ('</html></body>');
printWindow.document.write(writeMe);
printWindow.document.close();
printWindow.focus();
printWindow.print();
//you might even use this next line if you want the 'popup' window to go away as soon as they have finished printing.
//printWindow.close();
});
Note: I am just using the class="ui-selectable-helper" to show you that indeed the CSS pages are transferring properly to the new popup window. 注意：我只是使用class="ui-selectable-helper"向您显示，确实CSS页面已正确传输到新的弹出窗口。
解决方案2
0 已采纳 2013-02-18 20:05:38
What ended up working for me was appending something to the body with childDoc.write(myHtml); 最终对我childDoc.write(myHtml);是使用childDoc.write(myHtml);将某些东西附加到身体上childDoc.write(myHtml);
Previous to this, the CSS would not load, but once I actually passed in a few divs, the CSS showed up without any other modifications. 在此之前，CSS不会加载，但是一旦我实际传递了一些div，CSS就会显示出来而没有任何其他修改。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.