如何在iPad上使用Javascript打印iFrame的内容？

打印iFrame的内容已经成为解决跨浏览器问题的一个难题。测试了很多方法（其中一些在这个网站还发现）后，我目前的做法似乎工作相当不错的跨浏览器，看起来像这样：如何在iPad上使用Javascript打印iFrame的内容？

function printUrl(elem, url) { 
    $('#' + elem).append("<iframe style='border: none; width: 0; height: 0; margin: 0; padding: 0;' src='" + url + "' id='printFrame'></iframe>"); 

    $('#printFrame').load(function() { 
     var w = (this.contentWindow || this.contentDocument.defaultView); 
     w.focus(); 
     w.print(); 
    }); 
}

只有轻微的问题，此代码时使用iPad。 iPad打印包含iFrame的页面，而不是iFrame的内容。 Mac上的Safari可以正确打印iFrame的内容。

有没有人已经解决了这个问题，并能够在iPad上打印iFrame的内容？

来源

2011-10-03 Jasper Kuperus

w'你认为它会在iPad上？ –

不，这只是我在大多数浏览器中使用它的解决方案，不包括iPad。不知何故，这个w有一个参考iPad的顶部窗口，而不是iFrame。 –

'this'在你的'load'函数中有什么价值？ –

好的，首先。我没有解决问题。我创建了一个实际上可以伪造我想实现的解决方法。

因为iPad/iPhone简单的打印父页面，我换了完整的身体在一个新的div，然后附加在IFRAME和一些样式表这确保了打印的文档只包含内嵌框架：

function printUrl(url) { 
    $newBody = "<div class='do_not_print_this'>" 
       + $('body').html() 
       + "</div>" 
       + "<iframe style='border: none; 0; width: 100%; margin: 0; padding: 0;' src='" + url + "' class='printFrame'></iframe>" 
       + "<style type='text/css' media='all'>.printFrame { position: absolute; top: -9999999px; left: -99999999px; }</style>" 
       + "<style type='text/css' media='print'>.do_not_print_this { display: none; } .printFrame { top: 0; left: 0; }</style>"; 
    $('body').html($newBody); 

    $('.printFrame').load(function() { 
     var w = (this.contentWindow || this.contentDocument.defaultView); 
     w.focus(); 
     w.print(); 
    }); 
}

在正常视图中隐藏浏览器的iframe是使用绝对定位，在最终打印中使用无显示或隐藏引入的怪异行为完成的。

是的，它很丑。但是，这是目前我能想到的唯一选择。如果您有任何人想出更好的解决方案，请告诉我。

来源

2011-10-06 13:26:50

这是否仍然有效？即使是版本1的iPad？ –

下面是工作在常绿的浏览器和iOS的最新版本的跨跨平台功能：

function printElement(divid, title) 
{ 
    var contents = document.getElementById(divid).innerHTML; 
    var frame1 = document.createElement('iframe'); 
    frame1.name = "frame1"; 
    frame1.style.position = "absolute"; 
    frame1.style.top = "-1000000px"; 
    document.body.appendChild(frame1); 
    var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument; 
    frameDoc.document.open(); 
    frameDoc.document.write('<html><head><title>' + title + '</title>'); 
    frameDoc.document.write('</head><body style="font-family: Arial, Helvetica, sans; font-size: 14px; line-height: 20px">'); 
    frameDoc.document.write('<h1>' + title + '</h1>'); 
    frameDoc.document.write(contents); 
    frameDoc.document.write('</body></html>'); 
    frameDoc.document.close(); 

    setTimeout(function() { 
    window.frames["frame1"].focus(); 
    window.frames["frame1"].print(); 
    }, 500); 

    //Remove the iframe after a delay of 1.5 seconds 
    //(the delay is required for this to work on iPads) 
    setTimeout(function() { 
    document.body.removeChild(frame1); 
    }, 1500); 
    return false; 
}

这是基于this answer稍作修改（重要线路document.body.removeChild(frame1);必须去除，以允许在iOS上打印。）

来源

2017-05-09 12:25:56 d13

回答

相关问题