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

如何在iPad上使用Javascript打印iFrame的内容?,第1张

概述打印iFrame的内容已经成为解决跨浏览器的一个具有挑战性的问题.在测试了很多方法(其中一些也在这个网站上找到)之后,我目前的方法似乎工作得非常好,跨浏览器看起来像这样: function printUrl( elem, url ) { $( '#' + elem ).append( "<iframe style='border: none; width: 0; height: 0; ma 打印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();    } );}

在普通视图中隐藏浏览器的iframe是使用绝对定位完成的,使用无显示或隐藏可见性隐藏在最终打印中引入了奇怪的行为.

是的,这很难看.但是,这是我能想到的唯一可行的选择.如果您有任何人想出更好的解决方案,请告诉我.

总结

以上是内存溢出为你收集整理的如何在iPad上使用Javascript打印iFrame的内容?全部内容,希望文章能够帮你解决如何在iPad上使用Javascript打印iFrame的内容?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1079275.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存