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

Question

我知道，如果您按照这个SO问题保留对它的引用，您可以用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? */

Answer 1

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

因此，据我所知，你在新的选项卡中有一个脚本，它会触发一个对话框，一旦这个对话框被关闭，你就想关闭那个选项卡

假设您可以控制对话框已解除事件，则可以使用window.close（）关闭此窗口对话框中的已解除事件处理程序，该事件处理程序是在这个新打开的选项卡中编写的。

并评论这一声明

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

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

希望这会有所帮助。

Answer 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担保，我对其他人在这些浏览器中可能获得的结果非常感兴趣。

如果您按照SO问题的答案使用sessionStorage，则以上内容将不起作用。

Answer 3

您可以尝试以下操作：

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

Answer 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();
      };
    }