如何在 Safari/Chrome 中从 javascript 打印 IFrame

IT技术 javascript iframe webkit printing
2021-01-22 02:30:11

有人可以帮助我通过 Safari/Chrome 中的 javascript 调用打印 IFrame 的内容吗?

这在 Firefox 中有效:

$('#' + id)[0].focus();
$('#' + id)[0].contentWindow.print();

这适用于 IE:

window.frames[id].focus();
window.frames[id].print();

但是我无法在 Safari/Chrome 中使用任何东西。

谢谢

安德鲁

6个回答

这是我完整的跨浏览器解决方案:

在 iframe 页面中:

function printPage() { print(); }

在主页面

function printIframe(id)
{
    var iframe = document.frames
        ? document.frames[id]
        : document.getElementById(id);
    var ifWin = iframe.contentWindow || iframe;

    iframe.focus();
    ifWin.printPage();
    return false;
}

更新:自从我遇到这个问题以来,很多人似乎在发布的 IE 版本中遇到了这个问题。我现在没有时间重新调查这个,但是,如果你被卡住了,我建议你阅读整个线程中的所有评论!

@AndrewBullock 对于那些即使在使用你的脚本时仍然面临问题的人,我可以建议你添加一个注释来检查文档类型和 html 标题。我的父页面和 iframe 页面都使用了 html5boilerplate(所以 html5 和顶部的一些条件)并且当我将任一页面更改为 xhtml 并删除条件时,IE 拒绝仅打印 iframe(它总是打印父页面),然后是 iframe在没有父母的情况下正确打印。为什么哦,为什么总是只有 IE 导致如此头疼!:) 如果人们发现您的脚本不起作用,提供指向该区域的指针可能会有所帮助。
2021-03-13 02:30:11
即,webkit,mozilla。应该在歌剧中工作,但让我们面对现实,谁使用它?
2021-03-20 02:30:11
还有安德鲁,我有另一个想法。您不需要在子页面上定义新函数 printPage,因为您只是在调用打印函数。所以倒数第二行看起来像这样:ifWin.print()
2021-03-20 02:30:11
@Max 我已经更新了我的答案以包含您的编辑,此页面不断受到点击,所以我认为这会有所帮助:)
2021-04-05 02:30:11
感谢安德鲁的这个脚本。但是,您确实遗漏了一件使其在 IE 8 中工作的部分。请参阅我下面的帖子
2021-04-12 02:30:11

在 iframe 中放置一个打印函数并从父级调用它。

框架:

function printMe() {
  window.print()
}

家长:

document.frame1.printMe()
使用 NAME 属性,而不是 ID。
2021-03-17 02:30:11
你是如何让 document.frame1 工作的?我不得不改用这个:document.getElementById('frame1').contentWindow.printMe()
2021-03-25 02:30:11
检查您的打印设置。浏览器控制这个,而不是页面。
2021-04-01 02:30:11
在 ios/chrome 中不起作用。它仍然打印父内容
2021-04-05 02:30:11
它在 IE8 中不起作用。它正在打印所有内容(也在 iframe 之外)。任何想法请...
2021-04-09 02:30:11

我使用了 Andrew 的脚本,但在调用 printPage() 函数之前添加了一段。iframe 需要焦点,否则它仍然会在 IE 中打印父框架。

function printIframe(id)
{
    var iframe = document.frames ? document.frames[id] : document.getElementById(id);
    var ifWin = iframe.contentWindow || iframe;
    iframe.focus();
    ifWin.printPage();
    return false;
}

不过不要感谢我,这是安德鲁写的。我只是做了一个调整=P

嘿@Pearl,看看上面的安德鲁斯帖子。printPage 函数必须是 iframe 中文档的一部分,并由父文档(包含 iframe 的文档)上的 printIframe 调用。
2021-03-16 02:30:11
在“ifWin.printPage()”处,printpage 方法在哪里?我尝试编写单独的 printpage 方法,但它无法访问?
2021-03-30 02:30:11
这是一个很好的问题——我自己没有测试过。这是我们在 2011 年研究的一个解决方案,现在已经 6 年了,因此打印机 + 浏览器的支持发生了巨大的变化。这在移动设备上甚至可能不是必需的,但如果您确实需要这样的东西,这个概念应该仍然有效。本质上,我们的目标是 DOM 中的特定框架节点并调用 print() 方法。让我们知道会发生什么:D
2021-04-05 02:30:11
这是否适用于诸如 android 之类的移动设备?谢谢。
2021-04-11 02:30:11

除了 Andrew 和 Max 的解决方案之外,使用 iframe.focus() 会导致在 IE8 中打印父框架而不是仅打印子 iframe。更改该行修复了它:

function printIframe(id)
{
    var iframe = document.frames ? document.frames[id] : document.getElementById(id);
    var ifWin = iframe.contentWindow || iframe;
    ifWin.focus();
    ifWin.printPage();
    return false;
}
值得注意的是,如果 iframe 具有 display: none,则无法正确聚焦。您将看到与以前相同的问题——您需要使其可见,但在屏幕外。
2021-03-22 02:30:11

使用 firefoxwindow.frames但也要添加name属性,因为它使用了 firefox 中的 iframe

IE:

window.frames[id]

火狐:

window.frames[name]

<img src="print.gif"  onClick="javascript: window.frames['factura'].focus(); parent['factura'].print();">
<iframe src="factura.html" width="100%" height="400" id="factura" name="factura"></iframe>