Javascript window.print（）和window.close（）函数Safari IOS在不等待打印预览的情况下关闭窗口_Javascript_Ios_Mobile Safari

Javascript window.print（）和window.close（）函数Safari IOS在不等待打印预览的情况下关闭窗口

javascript ios

Javascript window.print（）和window.close（）函数Safari IOS在不等待打印预览的情况下关闭窗口,javascript,ios,mobile-safari,Javascript,Ios,Mobile Safari,在IOS中的Safari中，打印并关闭JavaScript功能似乎不像其他浏览器那样工作。如果您单独调用window.print（），它似乎可以工作。但是，如果您立即调用窗口.close（），它似乎会关闭窗口并打印预览，尽管打印预览窗口仍处于打开状态，但它不会等待完成或取消打印预览来关闭窗口，而只是立即关闭打开的窗口我创建了一个用于打印表格的按钮。它在一个新窗口中打开表格，并打开打印功能，然后稍等片刻，让浏览器有时间打开页面并呈现表格。打印完成后，应该关闭窗口提示：如果您有Mac和Xcode

在IOS中的Safari中，打印并关闭JavaScript功能似乎不像其他浏览器那样工作。如果您单独调用

window.print（）

，它似乎可以工作。但是，如果您立即调用

窗口.close（）

，它似乎会关闭窗口并打印预览，尽管打印预览窗口仍处于打开状态，但它不会等待完成或取消打印预览来关闭窗口，而只是立即关闭打开的窗口

我创建了一个用于打印表格的按钮。它在一个新窗口中打开表格，并打开打印功能，然后稍等片刻，让浏览器有时间打开页面并呈现表格。打印完成后，应该关闭窗口

提示：如果您有Mac和Xcode，您可以通过启动服务器

python-msimplehttpserver 8000

打开IPhone模拟器并使用python访问本地主机。要访问模拟器，请打开Xcode，然后打开Xcode>open Developer Tools>simulator

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>
<table class="table">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<button onclick="myPrintFunction()">Click me</button>

<script>
  function myPrintFunction() {
    let divToPrint = document.getElementsByClassName("table")[0];
    if (typeof divToPrint !== 'undefined') {
      let newWin = window.open();
      newWin.document.write('<h1>PRINT FRIENDLY</h1>');
      newWin.document.write(divToPrint.outerHTML);
      newWin.document.close();
      newWin.focus();
      setTimeout(()=>{
        newWin.print();
        newWin.close();
      }, 1000);
    } else {
      alert('NO EVENTS TO PRINT!');
    }
  }
</script>

</body>
</html>


桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
td，th{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}
单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利
点击我
函数myPrintFunction（）{
让divToPrint=document.getElementsByClassName（“表”）[0]；
if（DivTopPrint的类型！==‘未定义’）{
让newWin=window.open（）；
newWin.document.write（'PRINT-FRIENDLY'）；
newWin.document.write（divToPrint.outerHTML）；
newWin.document.close（）；
newWin.focus（）；
设置超时（（）=>{
newWin.print（）；
newWin.close（）；
}, 1000);
}否则{
警报（“没有要打印的事件！”）；
}
}

我避免使用write（），因为它删除了DOM。然后我添加了打印和关闭按钮。为了避免这些被渲染，我让它们消失并在10秒后重新出现

// 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';
      }, 10000);
    },
    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，而不是关闭窗口。