使用 Javascript 修改页面上的一些 href 链接

Question

我想更改 class 持有的我页面上的每个 link。btn_view

我页面上的 link 是这样的：

<a class="btn_view" href="/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="/download/documentC.pdf">VIEW</a>
...

进入

<a class="btn_view" href="viewer.html?file=/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="viewer.html?file=/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="viewer.html?file=/download/documentC.pdf">VIEW</a>
...

我正在处理这段代码，但我无法找出问题所在：

const items = document.getElementsByClassName(".btn_view");

items.addEventListener('click', (e) => {
  for (var i = 0; i < items.length; i++) //Loop through your elements
    {
        //Verify that the href starts with /download/
        if (items[i].href.indexOf("/download/") === 0)
        {
            // add viewer link in front of original url
            items[i].href = "viewer.html?file=" + items[i].href
            //If it does, open that URL in a new window.
            window.open(items[i].href, "_blank");
        }
    }
});

Answer 1

如果你真的想使用事件侦听器来做到这一点：

const items = document.getElementsByClassName("btn_view");

Array.from(items).forEach(item => item.addEventListener('click', (e) => {
  let href = item.href.replace(location.origin, "");
  if(href.indexOf("/download/") === 0) {
    e.preventDefault();
    window.open( "viewer.html?file=" + href, "_blank");
  }
}));

<a class="btn_view" href="/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="/download/documentC.pdf">VIEW</a>

但我建议您这样做：

const items = document.getElementsByClassName("btn_view");

Array.from(items).forEach(item => {
  let href = item.href.replace(location.origin, "");
  if(href.indexOf("/download/") === 0) {
    item.href = "viewer.html?file=" + href;
  }
});

<a class="btn_view" href="/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="/download/documentC.pdf">VIEW</a>

在这种情况下，链接是静态的，您不需要处理事件

Answer 2

第一个问题是您在这里使用了 class 选择器：

const items = document.getElementsByClassName(".btn_view");

这不会产生 class 为 btn_view 的标签。您将需要：

const items = document.getElementsByClassName("btn_view");

或

const items = document.querySelectorAll(".btn_view");

第二个问题是，即使 getElementsByClassName returns 一个包含 DOM 元素的 array-like 对象，您打算为其所有 items，但不是将其分配给 items，而是将其分配给 items 的容器。所以：

for (var item of items) {
        //Verify that the href starts with /download/
        if (item.href.indexOf("/download/") === 0)
        {
            // add viewer link in front of original url
            item.href = "viewer.html?file=" + item.href
            //If it does, open that URL in a new window.
            window.open(item.href, "_blank");
        }
}

Answer 3

你为什么要改变events只是循环并改变它是如何。

function modifyLink(){
var items = document.getElementsByClassName("btn_view");
for(var i=0;i<items.length;i++){
 let href = items[i].getAttribute("href");
 console.log(href);
 items[i].setAttribute('href','viewer.html?file='+href);
 
}
for(var i=0;i<items.length;i++){
 console.log(items[i].getAttribute("href"));
}
}

modifyLink();

<a class="btn_view" href="/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="/download/documentC.pdf">VIEW</a>

使用 Javascript 修改页面上的一些 href 链接

Modify some href links on a page using Javascript

javascript

url-rewriting

href

hyperlink

dom-events