个人中心
gpt4 book ai didi

javascript - 在 iFrame 中将两个 contentWindows 作为一个打印

转载 作者：行者123 更新时间：2023-12-03 00:41:10 25 4
gpt4 key购买 nike

我有一个包含多个 iFrame 的网页，例如6我希望能够在一次调用中打印其中 2 个帧，而不是获取每个帧的 contentWindow 然后调用:

parent.iFrame1.focus();
parent.iFrame1.print();
parent.iFrame2.focus();
parent.iFrame2.print();

因为它在浏览器中的两个单独的打印预览窗口中打印内容。

我尝试了以下方法，但没有一个真正能给我我正在寻找的东西或为我工作(即内容被 chop )

是否有可能做到或者我已经死马了？

我也尝试过从 iframe 中获取 html 并将其写入新文档，但感觉这有点繁琐。此外，还有多个 css 和脚本文件等需要合并以呈现一个有凝聚力的页面。

任何答案将不胜感激!

我尝试过但迄今为止尚未奏效的潜在解决方案:

Wait for html to write to window before calling window.print()

Print preview from multiple iframes?

https://graciesdad.wordpress.com/2007/04/19/all-in-one-printing-from-multiple-iframes/

Javascript Print iframe contents only

最佳答案

我会使用另一个 iframe 来完成这项工作。不过，该 iframe 必须位于同一域中。

在您的主页(例如 mydomain/index.html)

<html>
  <head>
    <style>
      .print {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
      <script>
        function printIframes(urls) {
          var iframe = document.createElement('iframe');
          iframe.className = "print";
          iframe.src = `print.html?urls=${encodeURIComponent(urls.join(','))}`;
          iframe.onload = function () {
            this.contentWindow.focus();
            this.contentWindow.print();
          };
          document.body.appendChild(iframe);
        }
      </script>
    </body>
</html>

printIframes()函数接受要打印的外部页面的 url 数组。它创建一个加载 .iframe 的“不可见” iframe(参见 print.html css 类)。查询字符串中包含这些 url:

<iframe src="print.html?urls=http://example.com,http://example.com"></iframe>

如果您直接访问该 iframe，您将看到以下内容:

enter image description here

<小时/>

在 print.html 例如mydomain/print.html

此页面解码urls查询字符串并为每个要加载的网址创建一个 iframe。

<html>
    <body>
        <script>
          var urls = document.location.search.split('=')[1];
          urls = decodeURIComponent(urls);
          urls = urls.split(',');
          urls.forEach(url => {
            var iframe = document.createElement('iframe');
            iframe.src = url;
            document.body.appendChild(iframe)
          });
        </script>
    </body>
</html>
<小时/>

示例

在此屏幕截图中，我加载主页 (index.html)，并在开发人员控制台中调用 printIframes()函数:(你实际上不会看到它们)

enter image description here

紧接着是打印该 iframe 内容的请求。

enter image description here

关于javascript - 在 iFrame 中将两个 contentWindows 作为一个打印，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53456976/

25 4 0
文章推荐： javascript - 如何在不重新加载页面的情况下更改 BrowserWindow 哈希 url
文章推荐： c# - 如何重新启动线程或任何其他替代解决方案
文章推荐： powershell - 导入表数据并使用databricks将其另存为json文档在adls gen2中
文章推荐： javascript - 仅显示首次访问 Django 的介绍视频
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com