ios - 在 iOS 11.3 中使用 PWA 打开 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，然后您可以通过处理后退按钮或通过回退覆盖处理关闭来自定义弹出组件。

我在实际项目中使用了第二点和第三点并且它的工作正常...

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

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

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

祝你好运。