从网页打印后使用 javascript 关闭选项卡答案

【问题标题】：Closing a tab with javascript after printing from a web page从网页打印后使用 javascript 关闭选项卡
【发布时间】：2016-04-16 04:53:43
【问题描述】：

我知道，如果您按照this SO question 保留对它的引用，您可以在 javascript 中打开一个新标签，然后将其关闭。

就我而言，我想打开一个新选项卡，其中包含一个自动触发浏览器打印对话框的脚本。一旦打印对话框被关闭，我希望新标签消失。由于新页面中的脚本不是创建该页面的脚本，因此它们无法关闭它。

有没有办法检测打印对话框何时关闭，以便创建新选项卡的脚本知道何时关闭它？

我想要完成的示例：

var printTab;
$('#print_me').on('click', null, function() {
    printTab = window.open($('#print_me').data('target'), "_blank");
    printTab.focus();
});

function closePrintTab() {
    printTab.close();
}

/* Here is the sketchy part; what triggers a call to closePrintTab? */

【问题讨论】：

您想在打印开始后关闭标签页吗？
这可能对你有帮助：stackoverflow.com/questions/6460630/…
@nikoskip：我已经尝试了其中的几种方法。我遇到的问题是现代浏览器现在只允许脚本关闭窗口，前提是该脚本首先打开了窗口。当您认为浏览器似乎正在积极尝试阻止此类事情时，答案中的最后一个解决方案是一种黑客行为，并且不是一个好的长期解决方案。
它不适用于歌剧
@Adam，你能在这里添加一些代码块吗？

标签： javascript html

【解决方案1】：

就我而言，我想打开一个新选项卡，其中包含一个自动触发浏览器打印对话框的脚本。关闭打印对话框后，我希望新标签消失。由于新页面中的脚本不是创建该页面的脚本，因此它们无法关闭它。

所以据我了解，您在新选项卡中有一个触发对话框的脚本，一旦该对话框被关闭，您就想关闭该选项卡。

假设您可以控制对话框关闭事件，您可以在对话框关闭事件处理程序中使用 window.close(); 关闭此窗口，该处理程序写入此新打开的选项卡中。

并对此声明发表评论

由于新页面中的脚本不是创建该页面的脚本，因此它们无法关闭它。

是的，您是对的，但是您可以从当前选项卡中的脚本关闭当前选项卡。这就是使用window.close(); 的时候。关闭当前窗口。

希望这有帮助。

【讨论】：

我试图从新标签页中加载的页面中的脚本中使用window.close()，Chrome 给了我这个警告：“脚本可能只关闭它打开的窗口。 "如果希望关闭新标签（至少在 Chrome 中），则必须使用打开该标签的同一脚本来完成。

【解决方案2】：

在这种情况下，我的解决方案是使用 HTML5 localStorage 工具。在带有打印按钮的页面上：

localStorage.removeItem('printFinished');
var printWindow = window.open('/path/to/print/', "_blank");
window.addEventListener('storage', function(event) {
    if(event.key == "printFinished") {
        printTab.close();
    }
}, false);

这里的重点是localStorage 无限期地持续存在。每次清除目标变量可确保我们不会与之前会话中的任何内容进行交互。接下来，我们需要确保我们只对感兴趣的项目的更改做出反应。

...对于单击打印按钮时打开的新选项卡中的代码：

window.onLoad = function() {
    window.print();
    localStorage.setItem('printFinished', true);
}

我在 Chrome 和 FireFox 中都测试了上述内容，没有任何问题。虽然我不能保证 IE/Edge、Safari 或 Opera，但我对其他人可能在这些浏览器中获得的结果非常感兴趣。

如果您按照this SO 问题的答案使用sessionStorage，上述方法将不起作用。

【讨论】：

【解决方案3】：

你可以试试这样的：

function closeThisWindow() {
         var win = window.open('', '_self');
         window.close(); // works for i.e.
         win.close(); //works for chrome
         return false;
}

【讨论】：

【解决方案4】：

很难打开新标签，然后在新标签上观看打印事件。我建议您使用打开新窗口，然后观看它的打印事件，然后在打印后自动关闭该窗口。示例：

//.ts

const windowUrl = 'about:blank';
const uniqueName = new Date();
const windowName = 'CloseTillPrint' + uniqueName.getTime();
const PrintWindow = window.open(windowUrl, windowName, 'z-index:999;position:absolute;left:50%;transform: translateX(-50%); top:0; bottom:0; height:100%; width:1000px');

if (PrintWindow) {
      const iframe = this.createIframe(pdfAsString, false);
      PrintWindow.document.open('text/plain');
      PrintWindow.document.write(iframe.outerHTML);
      // PrintWindow.document.write('Hello World');
      PrintWindow.document.close();
      const targetFrame = PrintWindow.frames[iframe.name];
      targetFrame.focus();
      targetFrame.print();
      setTimeout(() => {
        PrintWindow.focus();
      }, 1000);
      PrintWindow.onfocus = () => {
        console.log('print window focused');
        targetFrame.close(); PrintWindow.close();
      };
    }

【讨论】：