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

【问题标题】：How to print the contents of an iFrame using Javascript on iPad?如何在 iPad 上使用 Javascript 打印 iFrame 的内容？
【发布时间】：2011-10-03 12:38:35
【问题描述】：

打印 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 的内容？

【问题讨论】：

w 是你认为 iPad 上的样子吗？
不，这只是我让它在大多数浏览器中工作的解决方案，不包括 iPad。不知何故，这个 w 引用了 iPad 上的顶部窗口，而不是 iFrame。
this 在你的load 函数中有什么价值？
正如预期的那样，它带有一个HTMLIframeElement
我认为在 iPad / iPhone 上您无法聚焦 iFrame？无论我尝试什么，它都会继续在我身上打印整个页面。

标签： javascript ipad iframe printing safari

【解决方案1】：

好的，首先。我没有解决问题。我创建了一个变通方法，实际上伪造了我想要实现的目标。

因为 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 是使用绝对定位完成的，使用 display on none 或 visibility hidden 会在最终打印中引入奇怪的行为。

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

【讨论】：

【解决方案2】：

这是一个在常青浏览器和当前 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 上打印。）

【讨论】：