在 iOS 网页视图中，打印样式将覆盖隔空打印后的屏幕样式

Question

我正在开发一个使用Safari Webview的混合HTML5/iOS应用程序。我们使用"隔空打印"来允许用户打印 Web 视图的内容。我遇到的问题是，打开打印对话框后，打印样式在屏幕上生效，即使在打印完成或取消后也不会消失。这在我们的Windows或Android版本的应用程序中不会发生，它们分别使用CEF和Android系统Webview。按预期，这些版本的应用程序中的打印样式仅应用于打印输出。

有人有任何将AirPrint与Safari Webview一起使用的经验，可以阐明解决方案吗？我考虑过在打印前后使用 javascript 添加/删除包含 CSS 的链接标签，但这感觉很黑客，并且没有回答为什么将打印样式应用于屏幕的奇怪问题。

任何帮助表示赞赏！抱歉，没有真正的方法可以在此附加代码！

Answer 1

是的，这确实是一种意料之外的行为。但是，我们可以尝试使用 JavaScript 来解决这个问题。

理论：打印完成后，让我们重新加载样式表。浏览器将再次绘制页面，并希望使用屏幕定义。

实践：由于我们在打印后没有JavaScript回调，您可以尝试使用window.onfocus事件重新加载样式表，如下所示：

function updateStylesheets(){
  var links = document.getElementsByTagName("link");
  for (var x in links) {
    var link = links[x];
    if (link.getAttribute("type").indexOf("css") > -1) {
      link.href = link.href + "?id=" + new Date().getMilliseconds();
    }
  }
}
window.onfocus = updateStylesheets;

详细地说，它会抓取所有<link>标签，并在后面附加一个随机数，强制重新加载样式表。

如果这有效，请告诉我，我很乐意提供帮助。