使用 PWA 在 iOS 11.3 中打开 PDF 的问题

Question

我在我的 PWA 中使用了 Vuejs 和 Framework7。我想在我的 PWA 中打开一个远程 PDF 文件，对我来说，用户在打开 PDF 后能够返回我的 PWA 也很重要。我是这样做的：

window.open(pdf_url, "_blank");

它适用于 iOS > 12，打开 pdf 文件后，有一个“确定”按钮用于关闭 pdf。

但例如在 iOS 11.3 中没有按钮，用户必须使用主页按钮来关闭 PWA。

我尝试使用 iframe 解决问题，但我只能显示 pdf 的第一页。

有没有办法解决这个问题？

Answer 1

你可以通过一些技巧来解决这个问题（对于任何没有返回按钮的设备）：

1. 如果您使用 iframe，您可以使用溢出滚动手动设置高度，我认为这将解决问题（样式依赖或 lib 依赖，因此可能不起作用）。
2. 您可以在导航栏或工具栏中添加返回按钮，让用户单击它返回上一页。 （我更喜欢这种解决方案）。
3. 您可以在嵌套普通html页面的弹出窗口中渲染pdf，然后您可以通过处理后退按钮或通过dropback覆盖处理关闭来自定义弹出组件。

我在实际项目中使用了第二点和第三点，并且效果很好......

这是弹出窗口中使用的示例关闭按钮代码：

'<p><a href="#" class="button button-small popup-close">'+ i18nextHelper.i18next.t('Exit From PDF') +'</a></p>'

注意：您也可以只为pdf页面自定义高度，并在其下方添加普通按钮，或者在PDF上方添加绝对定位按钮，但我认为使用第二点或第三点最好。

祝你好运。