打印 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 的内容?
最佳答案
好的,首先。我没有解决问题。我创建了一个变通办法,它实际上伪造了我想要实现的目标。
因为 iPad/iPhone 简单地打印父页面,我将整个主体包装在一个新的 div 中,然后附加 iFrame 和一些样式表,以确保打印的文档只包含 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();
} );
}
在普通 View 中隐藏浏览器的 iframe 是使用绝对定位完成的,使用不显示或隐藏可见性在最终打印中引入了奇怪的行为。
是的,它很丑。但是,这是目前我能想到的唯一可行的选择。如果你们有更好的解决方案,请告诉我。
关于javascript - 如何在 iPad 上使用 Javascript 打印 iFrame 的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7635072/