添加父窗口'使用javascript将CSS转换为子窗口
Adding parent window's CSS to child window using javascript
我试图用主窗口的一小部分的可打印版本生成一个弹出窗口。我使用Meteor,所以HTML和CSS文件都是通过编程生成的。
我想做的是使用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);
但它不起作用。似乎childHead
指的是父文档的头,而不是子文档。我不确定这是我遇到的安全问题,还是只是代码中有错误。
你知道我做错了什么吗?
我在我的一个页面上做了一件非常类似的事情。我只是使用"父"页来编写所有内容,它运行良好。以下是它对我的作用。看看这把小提琴在演奏。您会注意到,它只打印printMe
分区中的内容。此外,打印的页面具有与父页面完全相同的脚本和样式。
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();
});
注意:我只是使用class="ui-selectable-helper"
来向您展示CSS页面确实正在正确地转移到新的弹出窗口。
最终对我起作用的是用childDoc.write(myHtml);
在身体上添加一些东西
在此之前,CSS不会加载,但一旦我真正传入了几个div,CSS就显示出来了,没有任何其他修改。
相关文章:
- 窗口大小html css
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 使用jQuery可以根据窗口大小更改滑块的css高度
- Javascript em根据窗口/视口尺寸调整大小,不影响文档样式的text/css
- 阻止Jquery对话框内容的CSS应用于主窗口
- TinyMCE 对话框.css未在图像弹出窗口中加载,会抛出 404
- 点击按钮后在css弹出窗口中填充valus
- 如何在HTML+jQuery+CSS中显示弹出窗口
- 通过jQuery或Javascript应用于父窗口的外部css规则
- 用css和图片打开新窗口
- 将CSS从父窗口附加到子弹出窗口
- 相对于窗口缩放CSS
- 如何在HTML和CSS(和/或JS/JQuery)中创建类似桌面的窗口
- ExtJS 4.2.1 用于加载指示和模态窗口的不同 CSS 掩码
- 如何在 Html/css 中的新窗口(而不是在新选项卡中)中打开链接
- 如何让 CSS/JavaScript 弹出窗口过渡
- 具有 JS CSS 和 HTML 的多个模态窗口
- CSS 窗口宽度调整大小问题
- Javascript弹出窗口css并点击函数
- 模态窗口css帮助