Question

我在JavaScript中有一个特定的页面打印问题。我需要在删除所有脚本的另一个标签页上打开我的页面（这样：$(document).get(0).documentElement.innerHTML.replace(/<script[^>]+>.*?<\/script>/gi, '')然后在新标签页内调用window.print()，然后关闭它。

这是因为脚本中的错误导致打印问题。负责整个印刷的代码：

var w = window.open();
w.document.write(
  $(document).get(0).documentElement.innerHTML.replace(/<script[^>]+>.*?<\/script>/gi,'')
);
w.document.close();

var loadingImagesInterval = setInterval(function() {
  var imgs = w.document.querySelectorAll('img');
  for (var i = 0; i < imgs.length; i++) {
    if (!imgs[i].complete) return;
  }

  clearInterval(loadingImagesInterval);

  w.focus();
  w.print();
  w.close();
}, 100);

基本上，问题是，在iOS上，w.print()似乎不会阻止代码执行，直到打印视图中的确认/取消，并且紧接着调用w.close()。所有其他浏览器都可以正常工作：Mac Chrome，Mac Safari，IE11，Mac Firefox。一切都很好。不是iOS Safari。

我尝试了这段代码，但也没有用过：

w.matchMedia('print').addListener(function(mql) {
  if (!mql.matches) {
    w.close();
  }
})

有没有更好的方法来处理我的问题？

Answer 1

编辑：iOS 12.2版在从主屏幕打开页面时引入了“完成”按钮，因此不需要如下所述的“关闭”按钮。只有12.0及更低版本才需要。

我通过以下方法解决了这个问题：

检测Safari；
添加打印和关闭按钮并将其隐藏以进行打印；
避免使用write()，因为它会打开一个新页面，并且关闭按钮不会使用户返回上一页。

注意事项：

可能必须在Safari的设置中停用弹出窗口阻止程序，以防止出现警报“此网站已被自动打印阻止。”

// detect Safari
if (navigator.userAgent.indexOf("Safari") !== -1) {
  // make print button
  const print_button = document.createElement('button');
  const print_button_text = document.createTextNode("Print");
  print_button.appendChild(print_button_text);
  print_button.addEventListener(
    "click",
    function() {
      // hide the buttons before printing
      print_button.style.display = 'none';
      close_button.style.display = 'none';
      newWindow.print();
      // delay reappearing of the buttons to prevent them from showing on the print
      setTimeout(() => {
        print_button.style.display = 'block';
        close_button.style.display = 'block';
      }, 2000);
    },
    false
  );
  // make close button
  const close_button = document.createElement('button');
  const close_button_text = document.createTextNode('Close');
  close_button.appendChild(close_button_text);
  close_button.addEventListener(
    "click",
    function() {
      newWindow.close();
    },
    false
  );
  newWindow.document.body.appendChild(print_button);
  newWindow.document.body.appendChild(close_button);
};

然后我添加了要打印的内容。希望对您有所帮助。

iOS Safari非阻塞window.print

1 个答案: