Question

我有一个带有表格和打印按钮的文档。打印按钮调用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>

Answer 1

虽然 我正在猜测 为什么会出现这个问题，但我想把这个答案放在这里，因为似乎已经有效了< / strong>基于对问题的评论。

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

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

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

大家都这么说，看来如果你把你的初始window.open（）调用的URL设置为你服务器的实际HTML页面（它可以是一个虚拟/存根）...然后注入你想要的CSS链接和在体内呈现的内容......它克服了这个问题。

Javascript OpenWindow没有加载样式表无法正常工作

1 个答案: