Question

客户的网站上有产品清单。通过页面底部的iFrame动态提取产品价格。页面上有Javascript，根据iFrame内容的加载大小，自动将此iFrame调整到正确的高度。

客户端报告说，在打印页面时，他们无法从iFrame中看到价格应该是什么 - 显然它不是在IE中打印，只是主页本身。

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

任何人都可以澄清这种情况下的预期行为吗？默认情况下是否可以让IE打印页面和包含iFrames，如果是这样，我将如何进行此操作？我只能找到打印特定帧的示例父窗口。

谢谢！

Answer 1

预期行为应该是您在其他浏览器中遇到的情况。如果打印页面，则应同时打印iframe。很难想象其他人都错了，IE在这种情况下得到了正确的答案。

以下是关于可能的问题的猜测，但在不知道更多/看到代码的情况下，很难知道具体细节：

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

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

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

打印

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

有用的链接：Print Specification

Answer 2

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

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

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

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

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

Answer 3

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

Answer 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。

Answer 5

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

JavaScript：打印完整的网页时，IE似乎不会在页面上打印iFrame的内容

5 个答案: