Javascript OpenWindow不加载样式表不工作答案

【问题标题】：Javascript OpenWindow not loading stylesheet not workingJavascript OpenWindow不加载样式表不工作
【发布时间】：2018-11-22 05:12:24
【问题描述】：

我有一个带有表格和打印按钮的文档。打印按钮调用 javascript 函数以在新窗口中生成可打印版本。可打印版本应从站点加载样式表。但是样式表不会加载。当我从新打开的窗口打开源代码时，尽管样式表 href -appears- 正确，但单击它什么也没做。很明显，我的浏览器无法将其识别为正确的 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 &gt;= 2018-01-01 AND date &lt;= 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>

【问题讨论】：

如果您将http://example.com/wp-content/plugins/jchwebdev-noise_by_hour/jchwebdev-noise_by_hour.css 放入您的网址栏中.. 是否会将您带到 CSS 表？ -- 是否重定向到https://？当你只做<link rel='stylesheet' href='/wp-content/plugins/jchwebdev-noise_by_hour/jchwebdev-noise_by_hour.css' type='text/css' media='all' /> 时会发生什么？
为什么要转义 URL 中的斜杠？它是一个字符串，而不是正则表达式，您的部分问题可能是转义那些href=\'http://example.com/wp-content/plugins/jchwebdev-noise_by_hour/jchwebdev-noise_by_hour.css\'
@Zak，如果我将网址粘贴到浏览器中，它可以正常工作。如果我碰一下它什么也不做。
@mpallansch 我只是在没有尝试过之后才尝试转义斜线。无论哪种方式都行不通。同样，它在 Firefox 中显示为语法突出显示的链接，但您无法单击它并且链接的 CSS 表不会加载。
@scnliffe 我在 window.open 的第一个参数中添加了一个虚拟页面，这似乎已经成功了。

标签： javascript html css href

【解决方案1】：

虽然我猜为什么会出现这个问题，但我想把这个答案放在这里是为了提高知名度，因为它似乎奏效了 基于问题上的 cmets。

我认为由于某种安全/上下文问题，新的弹出窗口（或取决于用户设置的新选项卡）没有加载和呈现链接的 CSS。

由于您正在进行的window.open(url, name, params); 调用是为url 和name 参数传入一个空字符串，我相信这会将您的新窗口设置为不同的“协议”或“域”上下文比您的打开页面和链接的 CSS 文件。

像@EricLaw 这样的人可能能够证实这种怀疑，但我相信""（空字符串）、"about:blank" 和"javascript:" 在用于弹出窗口/iframe 时会触发一些特殊的~沙盒~。

总而言之，如果您将初始 window.open() 调用的 URL 设置为来自服务器的实际 HTML 页面（它可以是虚拟/存根）...然后注入您想要的 CSS 链接和要在正文中呈现的内容......它克服了这个问题。

【讨论】：

在我将此标记为已接受的答案之前，我想对 - 为什么 - 你的答案有效。尽快回来。
别担心，我也想知道为什么您的原始代码不起作用但修改后的代码起作用的确切原因。我希望有熟悉浏览器/网络/安全详细信息的人能够加入。