在新标签页中从 iframe 中打开 PDF - Google Chrome

Posted

技术标签:

【中文标题】在新标签页中从 iframe 中打开 PDF - Google Chrome【英文标题】:Opening PDF from within iframe in new tab - Google Chrome 【发布时间】:2016-12-23 16:20:37 【问题描述】:

我有一个嵌入 iframe 的网页(iframe 内容托管在同一域下)。在该 iframe 中,有一个链接应该在单击时在新选项卡中打开 PDF 文件。

iframe 包含 html

<iframe src="./pages/ins_and_outs/ins_and_outs.html"    frameborder="0" id="ins-and-outs" target="ins-and-outs" sandbox="allow-scripts allow-top-navigation allow-popups"></iframe>

iframe:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
...
<a href="./ins-and-outs/downloads/ins-and-outs.pdf" target="_blank">Open our infographic</a>
...
</html>
Chrome 版本:52.0.2743.116(64 位) 操作系统:OSX 10.11.2

在 Google Chrome 中单击 PDF 的链接后,它会打开一个新选项卡,其中显示一个空白页面,但在地址栏中显示 PDF 的 URL。

我首先认为这是 PDF 本身的问题,所以我手动将其 URL 复制粘贴到浏览器的地址栏中,但发现它显示没有问题。

然后我继续在 Firefox 中测试我的页面,单击那里的链接导致 PDF 在新选项卡中正确显示。

出于测试目的,我还尝试将链接放在 iframe 之外,效果也很好。

我的结论是,通过单击 iframe 中的链接在 新标签页 中打开 PDF 是一个特定问题,并且仅在谷歌浏览器中。

关于究竟是什么原因造成这种情况的任何想法,以及什么样的解决方案是可能的?

我现在作为快速修复所做的是将“下载”属性添加到链接中,因此它不再显示 PDF,而只是下载它。

<a href="./ins-and-outs/downloads/ins-and-outs.pdf" target="_blank" download>Open our infographic</a>

【问题讨论】:

【参考方案1】:

我发现了一些东西!我知道您的问题是 2 年前提出的,但如果您在 iframe 中使用沙箱“allow-popups-to-escape-sandbox”,这将起作用。

这是一个例子:

<iframe id="blue" src="iframe.html" sandbox="allow-popups-to-escape-sandbox"></iframe>

【讨论】:

目前,这适用于 Chrome 46+、Firefow 49+ 和 Safari,但不适用于 IE 和 Edge。

以上是关于在新标签页中从 iframe 中打开 PDF - Google Chrome的主要内容,如果未能解决你的问题,请参考以下文章

在新标签页中打开链接在 Safari iOS 上不起作用

如何在浏览器中使用BASE64键打开PDF

在新选项卡中打开 PDF - Blazor

如何在新标签页中打开剃刀操作链接?

在新标签页中打开以进行打印

如何使用 javascript 在新标签页中打开 chrome 设置