在新窗口中打开链接后如何使用 JavaScript 更改 href 属性？答案

【问题标题】：How to change href attribute using JavaScript after opening the link in a new window?在新窗口中打开链接后如何使用 JavaScript 更改 href 属性？
【发布时间】：2013-03-13 12:21:56
【问题描述】：

我的页面上有一个链接

<a href="http://google.com" id="mylink" onclick="changeLink();" target="_blank">google</a>

目标是点击此链接（在新标签中打开）并更改其属性（在上一个标签上）。我的意思是我们在新标签页中打开 google.com，如果我们回头查看链接，它就会刷新。

这个js代码我试过了

function changeLink(){
    document.getElementById("mylink").href = "http://facebook.com";
    document.getElementById("mylink").innerHTML = "facebook";
    }

但它也改变了新的打开标签的目标。在我的示例中，它没有打开 google，而是打开了 facebook。

有办法解决吗？

【问题讨论】：

标签： javascript html

【解决方案1】：

你的onclick在href之前触发，所以它会在页面打开之前改变，你需要让函数像这样处理窗口打开：

function changeLink() {
    var link = document.getElementById("mylink");

    window.open(
      link.href,
      '_blank'
    );

    link.innerHTML = "facebook";
    link.setAttribute('href', "http://facebook.com");

    return false;
}

【讨论】：

【解决方案2】：

您可以使用setTimeout 延迟您的代码在点击后执行

function changeLink(){
    setTimeout(function() {
        var link = document.getElementById("mylink");
        link.setAttribute('href', "http://facebook.com");
        document.getElementById("mylink").innerHTML = "facebook";
    }, 100);
}

【讨论】：

【解决方案3】：

替换

onclick="changeLink();"

通过

onclick="changeLink(); return false;"

取消其默认操作

【讨论】：

【解决方案4】：

您可以在页面load中更改此设置。

我的意图是当页面来到load函数时，切换链接（当前链接在需要的那个）

【讨论】：

【解决方案5】：

例如试试这个：

<a href="http://www.google.com" id="myLink1">open link 1</a><br/> <a href="http://www.youtube.com" id="myLink2">open link 2</a>

document.getElementById("myLink1").onclick = function() { 窗口.打开（ “http://www.facebook.com” ); 返回假； }; document.getElementById("myLink2").onclick = function() { 窗口.打开（ “http://www.yahoo.com” ); 返回假； };

【讨论】：

【解决方案6】：

利用mousedown 侦听器修改href 属性与新的URL 位置，然后让浏览器确定它应该重定向到哪里有什么缺点吗？

到目前为止，它对我来说工作正常。想知道这种方法的局限性是什么？

// Simple code snippet to demonstrate the said approach
const a = document.createElement('a');
a.textContent = 'test link';
a.href = '/haha';
a.target = '_blank';
a.rel = 'noopener';

a.onmousedown = () => {
  a.href = '/lol';
};

document.body.appendChild(a);
}

【讨论】：