iOS webview中AirPrint之后的打印样式覆盖屏幕样式

Question

我正在开发一个使用 Safari Webview 的混合 HTML5/iOS 应用程序。我们使用 AirPrint 来允许用户打印 webview 的内容。我遇到的问题是打开打印对话框后，打印样式在屏幕上生效，即使打印完成或取消后也不会消失。这不会发生在我们的 Windows 或 Android 版本的应用程序中，它们分别使用 CEF 和 Android System 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> 标签并在其后附加一个随机数，从而强制重新加载样式表。

如果可行，请告诉我，我很乐意提供帮助。