javascript：在新的 window 页面上打开所有指向 pdf 的链接

Question

我有一个动态构建页面的网站。 这是一个 SharePoint 站点。 该站点包含许多文档库。 这些库包含 word、excel 和 PDF 文档。 当用户单击文档时，该文档将在客户端应用程序中打开，仅用于办公文档。 PDF 只需在同一个 window 中打开。 当人们关闭包含该文档的 window 时，他们会关闭该站点。 我正在尝试使用 javascript 将 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');
        }
    }
}

This code sort of works as some of the pdf links load in a new window as expected, some load in the parent window and some links load in both a new window and the parent. 如何告诉浏览器不要加载父 window 并且仅加载新的 window？

这就是我想要实现的目标：

<!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 不会在新的 window 中打开。 以下是来自文档库的链接示例：

<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>

Answer 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)

Answer 2

做

这是我要做的，我想我会收集anchors并循环它们以检查href是否以.pdf ，然后在所有.pdf链接上添加 function

别

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

请注意，如果用户使用添加阻止程序，新的 window 可能会在用户端被阻止。

这是片段：

 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>

Answer 3

我添加了以下 JavaScript 以获取包含“pdf”的链接以在新的 window 中打开：

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 否定了第一位代码。 我不得不用我自己的功能重载 function。

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

Using both pieces of JavaScript in a content editor web part, I got PDF documents to open in a new window and all other links/documents to load in the same window.

javascript：在新的 window 页面上打开所有指向 pdf 的链接

问题描述

3 个解决方案

解决方案1
1 2019-11-18 15:54:58

解决方案2
1 2019-11-18 16:16:18

做

别

解决方案3
0 已采纳 2019-11-18 18:18:50

javascript：在新的 window 页面上打开所有指向 pdf 的链接

问题描述

3 个解决方案

解决方案1 1 2019-11-18 15:54:58

解决方案2 1 2019-11-18 16:16:18

做

别

解决方案3 0 已采纳 2019-11-18 18:18:50

解决方案1
1 2019-11-18 15:54:58

解决方案2
1 2019-11-18 16:16:18

解决方案3
0 已采纳 2019-11-18 18:18:50