如何将 URL 与 javascript 结合使用？ [复制]答案

【问题标题】：How do I combine URLs with javascript? [duplicate]如何将 URL 与 javascript 结合使用？ [复制]
【发布时间】：2019-04-10 13:42:22
【问题描述】：

如何更改 id = "a1" 中的下载地址：

<a id="a1" href="http://domainext.com/idman632build9.exe" rel="nofollow noopener noreferrer">Download</a>

到：

domain.com/safelink/?url=http://domainext.com/idman632build9.exe

domain.com/safelink/ 是我网站上的下载页面

【问题讨论】：

document.getElementById 将允许您获取对 html 元素的引用。 setAttribute 将允许您更改 href 属性值。
1) 从元素中获取当前的 href 属性值。 2) 将其连接到另一个 URL 的末尾。 3) 将该值写回到元素的 href 属性中。你试过什么？你被什么困住了？这些步骤中的每一个都非常简单，在线研究肯定是微不足道的

标签： javascript

【解决方案1】：

只需使用querySelector 访问元素，然后将您想要的内容添加到现有href 的开头

let a = document.querySelector('#a1');

a.href = "domain.com/safelink/?url=" + a.href

console.log(a.outerHTML)

&lt;a id="a1" href="http://domainext.com/idman632build9.exe" rel="nofollow noopener noreferrer"&gt;Download&lt;/a&gt;

【讨论】：

这行得通，但是包含下载按钮的页面 url 打印成这样：domain.com/page/domain.com/safelink/?url=http://domainext.com/idman632build9.exe 如何删除：domain.com/page/？
这行得通，缓存有问题。谢谢@Maheer Ali
这非常符合我的期望。但是此代码只能更改一个 URL。带有id="a1"标签的所有网址怎么会改变，而不仅仅是一个网址？
@RenomuReza 请注意，id 在整个页面中始终是唯一的。如果您应该为此目的使用class = a1。对于具有相同类的所有元素，您可以使用document.querySelectorAll('a1').forEach(x => x.href = "domain.com/safelink/?url=" + x.href)

【解决方案2】：

    const myLinkElement= document.getElementById('a1');
    const currentLink = myelement.getAttribute('href');
    const newLink = "myNewLink";
    myelement.setAttribute('href',`${newLink}?url=${currentLink}`);

这是我提出的解决方案。

【讨论】：

【解决方案3】：

JS代码

var extURL = document.getElementById("a1").getAttribute("href");
var appendURL = "domain.com/safelink/?url="
var newURL = appendURL+extURL;

document.getElementById("a1").setAttribute("href",newURL);

【讨论】：

【解决方案4】：

您可以使用每个浏览器都可用的document.getElementById，然后设置其 href 属性。

var a1 = document.getElementById("a1")
var newHref = "domain.com/safelink/?url=" + a1.href
console.log(newHref)
a1.href = newHref

&lt;a id="a1" href="http://domainext.com/idman632build9.exe" rel="nofollow noopener noreferrer"&gt;Download&lt;/a&gt;

【讨论】：

@downvoter 这个答案有什么问题？