logo标签列表

JavaScript：在新窗口中打开页面上所有PDF链接

javascript
7

我有一个动态生成页面的网站，它是SharePoint网站。该网站包含许多文档库，这些库包含Word、Excel和PDF文档。当用户单击文档时，仅Office文档会在客户端应用程序中打开。PDF文档则只在同一窗口中打开。当人们关闭包含文档的窗口时，他们也关闭了该网站。我正在尝试使用JavaScript onload将target="_blank"添加到PDF链接。

到目前为止，我已经实现了以下代码：

window.onload = function(){
    l=document.links.length;
    for(i = 0; i<l; i++) {
        n = document.links[i].href.indexOf(".pdf");

        if (n > 0){
            document.links[i].setAttribute('target', '_blank');
        }
    }
}

这段代码基本可用，有些pdf链接按预期在新窗口中加载，有些在父窗口中加载，有些链接同时在新窗口和父窗口中加载。我该如何告诉浏览器只在新窗口而不是父窗口中加载，避免在父窗口中加载呢？
这是我想要实现的：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<a href="a.pdf">a.pdf</a><br /><br />
<a href="b.html">b.html</a><br /><br />
<a href="c.pdf">c.pdf</a><br /><br />

<script>
window.onload = function(){
    l=document.links.length;
    for(i = 0; i<l; i++) {
        n = document.links[i].href.indexOf(".pdf");

        if (n > 0){
            document.links[i].setAttribute('target', '_blank');
        }
    }
}
</script>
</body>
</html>

我遇到的问题是，SharePoint文档库修改了链接行为，导致JavaScript不会使它们在新窗口中打开。以下是文档库中链接的示例：

<a onfocus="OnLink(this)" href="https://rcd.sharepoint.com/HR/HR%20Policy%20Manual.pdf" onmousedown="return VerifyHref(this,event,'0','','')" onclick="return DispEx(this,event,'TRUE','FALSE','FALSE','','0','','','','','331','0','0','0x7fffffffffffffff','','')">HR Policy Manual</a>
它不应该在两个窗口中打开，你需要展示这种情况的一个例子。https://stackoverflow.com/help/minimal-reproducible-example 可能还有其他问题发生了。 - Ruan Mendes
当你将目标设置为_blank时，不清楚它将如何在父窗口中加载。 - epascarello
现在我无法在父窗口和子窗口中找到PDF打开。大多数链接在父窗口中打开。我只找到了一个在子窗口中打开的链接。更大的问题是，在在父窗口中加载PDF后，按下返回按钮时，我会收到页面已过期并需要重新加载的消息（仅适用于IE而不是Chrome、Firefox）。 - RCDAWebmaster
似乎与SharePoint提供的文档库有关，因为网站导航链接按预期工作。库中的链接显示为：<a onfocus="OnLink(this)" href="https://rcda145.sharepoint.com/HR/HR%20Policy%20Manual.pdf" onmousedown="return VerifyHref(this,event,'0','','')" onclick="return DispEx(this,event,'TRUE','FALSE','FALSE','','0','','','','','331','0','0','0x7fffffffffffffff','','')">HR Policy Manual</a>现在我需要查看函数的情况。 - RCDAWebmaster
3个回答
1

做

这是我会做的，我会收集所有的 anchors 并循环检查它们的 href 是否以 .pdf 结尾，然后在所有的 .pdf 链接上添加一个函数。

不要

不要使用 .indexOf('.pdf') 来检查 pdf 文件。如果有一个名为 somedummyfile.pdf.something.png（是一个 .png 图像）或任何其他格式的文件，则您的检查将失败。

请注意，如果用户使用广告拦截器，则可能会阻止新窗口。

以下是代码片段：

function modifyLinks() {
  let links = document.getElementsByTagName('a');
  let properties = 'height=' + window.innerHeight + ',width=' + window.innerWidth + ',' + 'scrollbars=yes,status=yes';
  for (i = 0; i < links.length; i++) {
    if (links[i].href.endsWith('.pdf')) {
      // links[i].setAttribute('target', '_blank'); // if you want to open them in new tab;
      console.log(links[i].href);
      links[i].addEventListener('click', function(e) {
        e.preventDefault();
        window.open(this.href, '_blank', properties);
      })
    }
  }
}

window.addEventListener('load', modifyLinks);
<a href="somefile_1.pdf">File 1</a>
<a href="somefile_2.pdf">File 2</a>
<a href="somefile_3.pdf">File 3</a>
<a href="test.html">HTML Link</a>
<a href="some_file.ai">Some Other file</a>

1
如果您无法访问页面上的所有元素，请使用启用捕获的addEventListener处理事件以捕获页面上的所有点击。测试是否为锚标签，并使用以下代码自行前往新页面：
document.addEventListener("click", function(e){
    if (e.target.localName == 'a') {
        var url = e.target.getAttribute('href');
        e.stopPropagation();
        // You can place extra checks here.
        var tab = window.open(url, '_blank');
        tab.focus();
    }
}, true)
我不想说，但那段代码仍然在同一个窗口中加载链接。 - RCDAWebmaster
@RCDAWebmaster，如果您能提供一个最小可重现的示例，那就太好了。 - Andriy Ivaneyko
我在我的原始问题中添加了一个代码片段，以展示我希望实现的内容，并附有一条注释，指出SharePoint文档库会渲染JavaScript无效，因为它具有使用DispEx的onclick事件，而我不理解这个事件。 - RCDAWebmaster
@RCDAWebmaster 更新了使用addEventListener的用法，请尝试使用以下方法。 - Andriy Ivaneyko
0
我添加了以下JavaScript代码，以便在新窗口中打开包含“pdf”的链接：
window.onload = function(){
    l=document.links.length;
    for(i = 0; i<l; i++) {
        n = document.links[i].href.indexOf(".pdf");

        if (n > 0){
            document.links[i].setAttribute('target', '_blank');
        }
    }
}

我注意到文档库在单击文档链接时使用了DispEx() JavaScript函数，这使得代码的第一部分无效。我不得不用自己的功能重载该函数。

function DispEx(a){
    if (a.href.endsWith('.pdf')){
        window.open(a);
        return false;
    }
}

使用内容编辑器 Web 部件中的两个 JavaScript 片段，我成功地让 PDF 文档在新窗口中打开，而其他链接/文档则在同一窗口中加载。
为什么要检查 .pdf 字符串的正数索引？为什么不检查 .endsWith('.pdf')？如果有一个名为 somedummyfile.pdf.something.png（这是一个 .png 图像）或任何其他格式的文件的文件名，您的检查将失败。 - Towkir
你说得很对。我应该检查文件名末尾的扩展名。我会更新上面的代码示例。 - RCDAWebmaster
你能试一下我提供的解决方案吗？应该可以解决问题。 - Towkir
谢谢，但接受自己的答案不是 SO 的惯例。 - Towkir
“接受自己的答案不是SO（Stack Overflow）的惯例”是什么意思？这就是我采用的答案和代码。 - RCDAWebmaster
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接