我有一个带有表格和“打印”按钮的文档。打印按钮调用 javascript 函数以在新窗口中生成可打印版本。可打印版本应该从站点加载样式表。但是样式表不会加载。当我从新打开的窗口打开源代码时，虽然样式表 href - 出现 - 正确，但单击它什么也没做。很明显，我的浏览器无法将其识别为正确的 href。
SO:为什么链接标签没有被识别为 href？
这是javascript函数:
jQuery("div.jch-noise_records span.print_button a").on('click', function(e) {
e.preventDefault();
var getpanel = document.getElementById("jch-noise_records");
var MainWindow = window.open('', '', 'height=500,width=800');
MainWindow.document.write('<!DOCTYPE html>\r\n');
MainWindow.document.write( '<html lang="en-US">\r\n<head>\r\n');
MainWindow.document.write( '<title>Noise Records Report</title>\r\n');
MainWindow.document.write( '<link rel="stylesheet" href="http://example.com/wp-content/plugins/jchwebdev-noise_by_hour/jchwebdev-noise_by_hour.css" type="text/css" media="all" />\r\n');
MainWindow.document.write( '</head>\r\n');
MainWindow.document.write( '<body>\r\n');
MainWindow.document.write( getpanel.innerHTML);
MainWindow.document.write( '\r\n</body>\r\n</html>\r\n');
MainWindow.document.close();
MainWindow.document.focus();
// MainWindow.print();
return true;
});
这是在打印窗口中生成的一些 html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Noise Records Report</title>
<link rel='stylesheet' href='http://example.com/wp-content/plugins/jchwebdev-noise_by_hour/jchwebdev-noise_by_hour.css' type='text/css' media='all' />
</head>
<body>
<span class="close"><a title="Close" href="#">X</a></span><div class="jch_table_wrapper"><p class="header"><span class="report_date">2018-06-12 18:00</span><span class="report_title">Noise By The Hour (Checkbox Detail)</span><span class="report_ip">71.231.25.83</span></p><p class="header"><span class="report_query">For date >= 2018-01-01 AND date <= 2018-05-31</span></p><table id="jch-noise_by_hour" class="jch-noise"><tbody><tr class="total"><td colspan="5">Total of <span>151 </span> days tracked for <span></span> at <span> 12AM</span> from <span>01/01/2018</span> to <span>05/31/2018</span><br>
Average noise: <span>82.8dbA</span><br>
Total # of events detected: <span>12,153</span><br>
Average number of events/hour: <span>6</span></td></tr>
</tbody></table></div>
</body>
</html>
最佳答案
虽然我在猜测为什么会出现这个问题，但我想把这个答案放在这里以提高可见性，因为它似乎有效 基于对问题的评论。
我认为由于某种安全/上下文问题，新的弹出窗口(或新选项卡，取决于用户的设置)没有加载和呈现链接的 CSS。
由于 window.open(url, name, params); 调用是为 url 和 name< 传递一个空字符串 parameters 我相信这会将您的新窗口设置为与您的打开页面以及链接的 CSS 文件不同的“协议(protocol)”或“域”上下文。
有人喜欢 @EricLaw也许能够证实这种怀疑，但我相信 ""(空字符串)、"about:blank" 和 "javascript:"用于弹出窗口/iframe 时触发一些特殊的 ~sandboxing~。
总而言之，如果您将初始 window.open() 调用的 URL 设置为来自您的服务器的实际 HTML 页面(它可以是虚拟/ stub )……然后注入(inject)您想要的 CSS 链接和要在正文中呈现的内容……它解决了这个问题。
关于Javascript OpenWindow 不加载样式表不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50823360/