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

Question

我正在开发一个使用Safari Webview的混合HTML5/iOS应用程序.我们使用AirPrint允许用户打印webview的内容.我遇到的问题是打开打印对话框后,打印样式会在屏幕上生效,即使打印完成或取消后也不会消失.这不会发生在我们的Windows或Android版本的应用程序中,它们分别使用CEF和Android System Webview.这些版本的应用程序中的打印样式仅应用于打印输出,如预期的那样.

任何人都有使用AirPrint和Safari Webview的经验,可以解释一下解决方案吗？我已经考虑过在打印之前和之后添加/删除包含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>标签并在后面附加一个随机数，强制重新加载样式表。

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