others - 超链接 - 在使用javascript的页面上,修改href链接

85 4

我想更改页面上 class .btn_view的每个链接。

我在网页上的链接如下:


<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");


 }


 }


});



时间: 原作者:

117 1

如果你希望使用event listener来执行这个操作:


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>

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

原作者:
133 2

第一个问题是,你在这里使用class选择器:


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



这将不会产生有btn_viewclass的标记,你将需要:


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



或者


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



第二个问题是,即使getElementsByClassName返回一个像DOM元素,你打算为它所有的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");


 }


}



原作者:
58 5

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>
原作者:
81 4

设置事件侦听器的方式不会工作的,你还需要在单击链接后,运行代码来调用preventdefault ,使用getElementsByClassName时,你也不需要预先添加'.'。你还应该使用getAttribute()替代.href:


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



for (var item of items) {



 item.addEventListener('click', (e) => {


 e.preventDefault()


 if (e.target.getAttribute("href").indexOf('/download/') === 0) {


 e.target.href ="viewer.html?file=" + e.target.getAttribute('href')


 }


 window.open(e.target.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>

下面的代码将所有以/downloads/开头的链接添加到类btn_view中,并使用字符串:


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



for (var item of items) {


 if (item.getAttribute("href").indexOf('/download/') === 0) {


 item.href ="viewer.html?file=" + item.getAttribute('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>
原作者:
...