如何在Safari和Chrome中利用JavaScript打印iframe？-JavaScript中文网-JavaScript教程资源分享门户

当我们需要在网页上显示一个可滚动的独立区域，最常用的方法就是使用iframe标签。但是，如果我们想要将iframe中的内容打印出来，该怎么办呢？本文将提供解决方案，并详细介绍如何在Safari和Chrome中使用JavaScript打印iframe。

问题描述

首先，让我们来看一下具体的问题：在Safari和Chrome中，当我们尝试使用window.print()函数打印页面时，iframe中的内容并不会被包含在打印结果中，只有外层文档的内容才能被正确地打印。那么，该怎么样才能打印iframe中的内容呢？

解决方案

为了解决这个问题，我们可以通过JavaScript创建一个新的窗口，将iframe中的内容复制到该窗口中，并在该窗口中调用window.print()函数进行打印。具体实现步骤如下：

首先，在HTML文档中添加一个button按钮，用于触发打印操作。例如：

<button onclick="printIframe()">打印</button>

然后，在JavaScript文件中定义printIframe函数，并在其中创建一个新的窗口。例如：

function printIframe() {
  var iframe = document.getElementsByTagName('iframe')[0];
  var newWindow = window.open();
  newWindow.document.write(iframe.contentDocument.outerHTML);
  newWindow.document.close();
  newWindow.focus();
  newWindow.print();
}

在上述代码中，我们首先获取了第一个iframe元素，并创建了一个新的窗口。然后，我们将iframe中的内容复制到新窗口中，通过调用newWindow.print()函数来触发打印操作。

示例代码

以下是一个完整的示例代码：

-- -------------------- ---- -------
--------- -----
------
------
  -----------------------
-------
------
  ------- ----------------------------- ------------ ----------------------
  ------- -----------------------------------
  --------
    -------- ------------- -
      --- ------ - -------------------------------------------
      --- --------- - --------------
      -----------------------------------------------------------
      ---------------------------
      ------------------
      ------------------
    -
  ---------
-------
-------

结论

通过以上方法，我们可以在Safari和Chrome中使用JavaScript打印iframe中的内容。这种方法不仅适用于静态页面，也适用于动态加载的内容。希望本文能够对前端开发人员解决类似问题有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/14580