JavaScript：打印整个网页时，IE 似乎没有在页面上打印 iFrames 的内容答案

【问题标题】：JavaScript: When printing a full web page, IE doesn't seem to print the contents of iFrames on the pageJavaScript：打印整个网页时，IE 似乎没有在页面上打印 iFrames 的内容
【发布时间】：2013-03-28 20:59:23
【问题描述】：

客户的网站上有产品列表。产品价格通过页面底部的 iFrame 动态拉入。页面上的 Javascript 会在加载后根据 iFrame 内容的大小自动将此 iFrame 调整为正确的高度。

客户报告说，在打印页面时，他们在 iFrame 中看不到任何价格应该是的东西 - 显然它不是在 IE 中打印，只是主页本身。

我在 Mac 上，所以无法在 IE 中进行测试，所以我很难尝试这个。

谁能澄清这种情况下的预期行为？是否可以让 IE 默认打印页面和包含的 iFrame，如果可以，我将如何执行此操作？ 我只能找到打印特定框架的示例父窗口。

谢谢！

【问题讨论】：

这并不能回答您的问题，但可能允许您将来使用 IE 进行测试 - habdas.org/emulating-ie-with-virtualbox
IE 处理 iframe 打印的方式可能存在一些差异，您最好提供网站的 URL，或者类似问题的 HTML 页面（包括 CSS）的来源。
我发现其他人报告了 IE here 的类似问题
为什么不使用 ajax 来获取值？这似乎是一个奇怪的解决方法。另外...设置值后，您不必担心它们不会打印。
请检查可能有用的链接stackoverflow.com/questions/4442344/…stackoverflow.com/questions/2518256/…

标签： javascript internet-explorer iframe printing

【解决方案1】：

预期行为应该是您在其他浏览器中遇到的情况。如果页面被打印，则 iframe 应该与它一起打印。很难想象其他人都做错了，而 IE 在这种情况下做对了。

以下是关于问题可能的一些推测，但如果不了解更多信息/查看代码，很难了解具体情况：

这个问题可能是由于您的页面上可能有一些 CSS。我读过类似的iframe 打印问题，其中visibility 最初设置为hidden 导致iframe 无法正确打印。为了解决这个特定情况，用户必须将width 和height 设置为0px。在不了解您的网站的情况下，我无法正确预测这种情况正在发生。

另一个问题可能是您根据 iframe 的内容动态调整大小。一个简单的测试是注释掉该部分并在iframe 上设置通用width 和height，以查看打印问题是否仍然存在。也许这些动态样式没有被转移到打印样式表中并且没有被应用（因此根本没有出现）。

作为一个快速建议，请查看css media types：

打印

适用于分页材料和在屏幕上查看的文档打印预览模式。请参阅paged media 部分了解有关分页媒体特有的格式问题的信息。

有用的链接：Print Specification

【讨论】：

【解决方案2】：

这是一个有趣的点，所以我使用 IE8 做了一个测试（在服务器上，而不是本地）。

我在 IE8 中打印了一个网页，其中包含我构建的 iframe。它第一次打印了一些内容（其他内容显示为黑色）。我第二次打印时，iframe 的内容都是黑色的。

但是，在我的示例中，iframe 中的内容不断变化（图像和文本淡入淡出），其背后的 css 背景是黑色的。

此测试的 iFrame 内容与主页的内容位于不同的主机服务器上。但据我所知，这里有一个跨域策略文件。

我的第一个猜测是跨域策略问题，但完全有可能 Internet Explorer 在将屏幕截图发送到打印机时呈现屏幕截图的方式存在一些问题。

【讨论】：

【解决方案3】：

如果您使用的是 Javascript，那么为什么不试试 window.print() 函数和 print media CSS。

【讨论】：

【解决方案4】：

我无法解释为什么 IE 不工作，但也许你可以通过将这部分代码添加到父页面来解决问题，以强制刷新每个 iframe：

$(document).ready(function() {
    if($.browser.msie) {//Only for IE
        $('iframe').each(function() {
          $(this).attr('src', $(this).attr('src'));
        });
     }
});

要获取浏览器，我使用this 方法。
而且我不使用contentDocument.location.reload(true); 方法来确保刷新iframe。见SO topic。

【讨论】：

$.browser 已从 jQuery 1.9 中删除：api.jquery.com/jQuery.browser
是的，你是对的。您必须使用旧的 jQuery 版本，因为新方法是检测浏览器是否支持给定功能，而不是获取浏览器名称。这是jQuery.support 在我们的例子中，我们不知道问题出在哪里。

【解决方案5】：

试试这个插件它会解决你的问题 http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/

【讨论】：