如何在打开新窗口后使用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。

有没有可能修复它？

- Mike Elucidate

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

- Pete

Answer 2

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

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

- jcubic

Answer 3

替换

onclick="changeLink();"

by

onclick="changeLink(); return false;"

取消默认操作

- artahian

Answer 4

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

我的意图是当页面进入load函数时，切换链接（将当前链接更改为所需链接）。

- Hodaya Shalom

Answer 5

举个例子，试一下这个：

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

document.getElementById("myLink1").onclick = function() {
    window.open("http://www.facebook.com");
    return false;
};
    
document.getElementById("myLink2").onclick = function() {
    window.open("http://www.yahoo.com");
    return false;
};

- Aris

Answer 6

在我的情况下，我使用了一个React代码，在我的导航链接上使用了map方法，href属性简单地将您带到页面上的相应位置。

<ul className="app__navbar-links">{[
              "About",
              "Impact report",
              "Our programs",
              "Resources",
              "Blog",
              "Free downloads",
              "Join community",
            ].map((item, index) => (
              <li className="app__flex" key={index}>
                <div />

                <a href={`#${item}`} id="nav-link" onClick={handleBlogClick}>
                  {" "}
                  {item}
                </a>
              </li>
            ))}
          </ul>

我需要在博客导航栏上添加一个新选项卡。使用set Attribute可以打开一个新的选项卡，但它不会默认到新选项卡的来源，并且会刷新整个页面。但是这个解决方案对我有效。

const handleBlogClick = (event) => {
    const navLink = document.querySelectorAll("#nav-link");
    if (event.target === navLink[4]) {
      const blogNav = navLink[4];
      console.log(blogNav);
      console.log(event.target.innerHTML);
      window.open(
        "https://www.linkedin.com/company/ideas-worth-billions/",
        "_blank",
        "noopener,noreferrer"
      );

      blogNav.innerHTML = "Blog";
      return false;
    }
  };

- user20417202

Answer 7

利用 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);
}

- motss