当 url 以 https 开头时，iframe 打印在 chrome 中不起作用答案

【问题标题】：iframe print not working in chrome when url starts with https当 url 以 https 开头时，iframe 打印在 chrome 中不起作用
【发布时间】：2017-12-24 12:59:00
【问题描述】：

我需要在不使用 window.open 和 window.print 函数的情况下打印页面。
我使用下面的代码实现了同样的效果。如果 url 不是以 https 开头（至少我认为是这样），这将有效。如果 url 以 https 开头，则 chrome 会打印出一个空白页。有时在多次点击打印链接时，会显示页面数据。此代码在 IE 和 FireFox 中正常工作。

我已经在下面的 url 中上传了包含此代码的示例测试页面。

http://mediateqindia.com/testPrint.html（正常工作）

https://mediateqindia.com/testPrint.html（点击打印链接空白页）

两个链接都指向同一个页面。

如何解决此问题以在 https 中使用 chrome 工作？

testPrint.html 页面上的代码如下所示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bindddddddddd</title>
</head>
<body>
<div id="testPrintDiv" >
Hiiiiiiiiiiiiiii
<br /><br />
Hellooooooooooooo
<br /><br />
World !!!!!!!!!!!!!!!!!!!!!!!!!!!s
<a href="javascript:printTest();">Print</a>
</div>
</body>
</html>



<script>
function printTest(){
var scale=1;
var contents=document.getElementById("testPrintDiv").innerHTML;
if(!scale){ 
    scale=".9";
}
    var printframe = document.createElement('iframe');
    printframe.name = "printframe";
    printframe.style.position = "absolute";
    printframe.style.top = "-1000000px";
    document.body.appendChild(printframe);
    var frameDoc = printframe.contentWindow ? printframe.contentWindow : printframe.contentDocument.document ? printframe.contentDocument.document : printframe.contentDocument;
    frameDoc.document.open();
    frameDoc.document.write('<meta http-equiv="X-UA-Compatible" content="IE=edge" /><html><head><title></title>');
    frameDoc.document.write('<link rel="stylesheet" type="text/css" href="/user/data/css/styles-min.css">');
    frameDoc.document.write('<style type="text/css">@media print { body {transform: scale('+scale+');} @page{margin-left: 0cm;} body {margin-left:0;padding:0;}'
                +'</style></head><body>');
       frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
       frameDoc.document.close();

       setTimeout(function () {
            window.frames["printframe"].focus(); 
            window.frames["printframe"].print();       
             setTimeout(function () {
                document.body.removeChild(printframe);
             },5000);
        }, 750);

    //return false;     
}

</script>

【问题讨论】：

标签： javascript html google-chrome printing https

【解决方案1】：

问题在于 css 文件的加载时间。

当下面一行被评论时，一切都开始正常了。

frameDoc.document.write('<link rel="stylesheet" type="text/css"
href="/user/data/css/styles-min.css">');

在增加为 setTimeout 函数指定的间隔时，上述代码间歇性地工作。由于获取 css 文件所需的时间会因服务器位置而异，我重写了如下代码，现在是按预期工作。

<script>
function printTest(){
var scale=1;
var contents=document.getElementById("testPrintDiv").innerHTML;
if(!scale){ 
    scale=".9";
}
    var printframe = document.createElement('iframe');
    printframe.name = "printframe";
    printframe.style.position = "absolute";
    printframe.style.top = "-1000000px";
    document.body.appendChild(printframe);
    var frameDoc = printframe.contentWindow ? printframe.contentWindow : printframe.contentDocument.document ? printframe.contentDocument.document : printframe.contentDocument;
    $.when( $.ajax({url:'/user/data/css/styles-min.css',cache:true}) )
            .done(function(response) {
    frameDoc.document.open();
    frameDoc.document.write('<meta http-equiv="X-UA-Compatible" content="IE=edge" /><html><head><title></title>');
    frameDoc.document.write('<link rel="stylesheet" type="text/css" href="/user/data/css/styles-min.css">');
    frameDoc.document.write('<style type="text/css">@media Print {body {transform:scale('+scale+')}} @page{margin-left: 0cm;} body {margin-left:0;padding:0;}'
                +'</style></head><body>');
       frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
       frameDoc.document.close();

       setTimeout(function () {
            window.frames["printframe"].focus(); 
            window.frames["printframe"].print();       
             setTimeout(function () {
                document.body.removeChild(printframe);
             },1500);
        }, 1500);

    });     
}

</script>

【讨论】：