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

Question

我的页面上有一个链接

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

有可能修复它吗？

Answer 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;
}

Answer 2

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

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

Answer 3

代替

onclick="changeLink();"

经过

onclick="changeLink(); return false;"

取消其默认操作

Answer 4

您可以在页面中更改它load。

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

Answer 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”
        );
        返回假；
      };

Answer 6

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

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

// 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);
}