html - 新标签超链接到 PDF

标签 html google-chrome pdf hyperlink compatibility

我注意到,如果我使用 target="_blank" 创建指向 PDF 的超链接,它无法正确打开。它会打开一个新选项卡,但不会加载 PDF,它只会显示一个白色屏幕。我使用的是 Google Chrome v.43。有没有其他人注意到这个问题或找到了解决办法?

我已经使用 Safari 和 Firefox 对此进行了测试,并且在打开 PDF 到新选项卡时都没有任何问题。我也试过在 Chrome 中禁用我的附加组件并使用隐身模式,但没有成功。

测试链接:http://jsfiddle.net/fkfxoho0/

<a href="http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf" target="_blank">Optimization Starter Guide</a>

Chrome v.42 的视频和 v.43 的问题:
https://youtu.be/v_EAedODKfA

最佳答案

问题似乎是由带 the sandbox attribute 的 iframe 引起的(如 JSFiddle),因为此类 iframe 外部的链接不会发生此问题。可以使用以下 HTML 文件在 JSFiddle 之外重现该问题。

frame.html:

<iframe sandbox="allow-same-origin allow-forms allow-popups allow-scripts" src="content.html"></iframe>

content.html:

<a href="https://www.adobe.com/enterprise/accessibility/pdfs/acro6_cg_ue.pdf">default</a>
<a href="https://www.adobe.com/enterprise/accessibility/pdfs/acro6_cg_ue.pdf" target="_blank">_blank</a>
<a href="https://www.adobe.com/enterprise/accessibility/pdfs/acro6_cg_ue.pdf" target="_top">_top</a>

使用这些沙箱值,默认目标、_blank_top 都无法呈现 PDF,默认情况下无法在 iframe 中呈现,并且 _blank_top 打开新标签页失败(_top 打开新标签页是因为沙盒)。

如果我们添加 allow-top-navigation 沙箱值,我们可以使 _top 按预期工作。

<iframe sandbox="allow-same-origin allow-top-navigation allow-forms allow-popups allow-scripts" src="content.html"></iframe>

但是,_blank 打开的新标签页仍然无法呈现 PDF。即使我在 MDN 上添加了所有沙箱放松属性,问题仍然存在(并不是我期望添加 allow-pointer-lock 来做任何事情)。

<iframe sandbox="allow-same-origin allow-top-navigation allow-forms allow-popups allow-scripts allow-pointer-lock" src="content.html"></iframe>

_blank 在 Chrome 43 的 iframe 中工作的唯一方法是完全删除 sandbox 属性。

<iframe src="content.html"></iframe>

现在默认目标 _blank_top 按预期工作。

不幸的是,删除 sandbox 属性并不是一个很好的解决方法。如果您首先使用它,那么您可能需要它。 我不能肯定地说在沙盒 iframe 中阻止 PDF 文件没有安全原因,但用户体验让我相信这更有可能是一个错误。

我已经为这个问题打开了一个错误报告,链接回这个问题:

https://code.google.com/p/chromium/issues/detail?id=505860

更新:事实证明这是一个设计使然的安全功能,因此它可能不会返回到 Chrome 42 行为,但将来可能会添加一个新的沙箱选项来放松此安全功能。

UPDATE-2:允许此功能的沙箱属性是“allow-popups-to-escape-sandbox”。更多信息 here

关于html - 新标签超链接到 PDF,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31142749/

相关文章:

javascript - slider 设置功能

javascript - 建议一种在数据库驱动的 Web 应用程序上提供弹出帮助文本的方法和/或 COTS 应用程序?

CSS Sibling 选择器在 Chrome 下出现故障

ios - 如何从 iOS 中的 UIVIew 选择文本范围?

pdf - 将 pdf 正确转换为 ps,反之亦然

javascript - 将新行 ' ' 自动添加到 select 选项

java - Selenium WebDriver - 当元素具有动态 id 时如何获取元素的 id?

Rstudio rmarkdown : both portrait and landscape layout in a single PDF

javascript - 访问和修改在 Google Chrome 中使用 window.open 打开的选项卡

javascript - 在Chrome内容脚本中使用模板的建议方法是什么?