打印后删除iframe

Question

我是 HTML 和 Javascript 新手。我正在尝试编写一个 Javascript 函数来打印（隐藏的）iframe 的内容，以便在不打开文档的情况下打印文档（看似给用户）。

我的函数基于我在这里找到的示例：https://developer.mozilla.org/en-US/docs/Printing#Print_an_external_page_without_opening_it

打印内容工作正常，但问题是打印完成后从文档中删除 iframe。这就是我的代码现在的样子。

function closePrint () {
            var element = document.getElementById("printFrame");
            element.parentNode.removeChild(element);
        }

        function setPrint () {
            this.contentWindow.__container__ = this;
            this.contentWindow.onbeforeunload = setTimeout(closePrint, 100);
            this.contentWindow.onafterprint = setTimeout(closePrint, 100);

            this.contentWindow.focus(); // Required for IE
            this.contentWindow.print();

        }

        function printPage (sURL) {
            var oHiddFrame = document.createElement("iframe");
            oHiddFrame.onload = setPrint;
            oHiddFrame.width = 0;
            oHiddFrame.height = 0;
            oHiddFrame.style.position = "fixed";
            oHiddFrame.style.right = "0";
            oHiddFrame.style.bottom = "0";
            oHiddFrame.id = "printFrame";
            oHiddFrame.src = sURL;
            document.body.appendChild(oHiddFrame);
        }

我在示例中更改了两行

            this.contentWindow.onbeforeunload = closePrint;
            this.contentWindow.onafterprint = closePrint;

到

            this.contentWindow.onbeforeunload = setTimeout(closePrint, 100);
            this.contentWindow.onafterprint = setTimeout(closePrint, 100);

因为它没有在没有超时的情况下删除 iframe。 这在 IE11 和 Chrome 中都可以正常工作，但在 IE 兼容模式（我认为它模拟 IE7）中，当我尝试使用 setTimeout 时，它会给我一个错误“未实现”。

所以我的问题是，是否有另一种方法可以在超时后运行 closePrint 函数，或者是否有其他方法可以在打印内容时从文档中删除 iframe？如有任何帮助，我们将不胜感激。

Answer 1

打印后，将 iframe 保留在

document.body

上。当您需要添加下一个

iframe

时，首先检查它是否存在 ~ 如果存在，则将其删除（前两行）。

myfunction() {
  const iframe = document.querySelector('iframe');
  if (iframe) iframe.parentNode.removeChild(iframe);
  const i = document.createElement('iframe');
  i.style.display = 'none';
  i.src = this.study.DocumentUrl;
  document.body.appendChild(i);
  document.querySelector('iframe').contentWindow.focus();
  document.querySelector('iframe').contentWindow.print();
}

Answer 2

我设法使用 focus 事件监听器来做到这一点。因此，当打印窗口关闭时（无论是通过实际打印还是通过取消），事件侦听器都会触发 cealnup 函数。

const filePreview = () => {  

  const iframe = document.createElement("iframe");
  iframe.style.display = "none";
  // add some data to it

  document.body.appendChild(iframe);

  const cleanup = () => {
    document.body.removeChild(iframe);
    window.removeEventListener('focus', cleanup);
  };

  // Add an event listener to detect when the window gains focus again
  window.addEventListener('focus', cleanup);

  iframe.contentWindow.print();
}