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

How to change href attribute using JavaScript after opening the link in a new window?

本文关键字：链接 JavaScript 属性 href 更改 新窗口 窗口      更新时间：2023-09-26

我的页面上有一个链接

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

有可能修复它吗?

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

您可以在点击

后使用setTimeout延迟代码的执行
function changeLink(){
    setTimeout(function() {
        var link = document.getElementById("mylink");
        link.setAttribute('href', "http://facebook.com");
        document.getElementById("mylink").innerHTML = "facebook";
    }, 100);
}

Replace

onclick="changeLink();"


onclick="changeLink(); return false;"

取消默认动作

您可以在load页面更改。

我的意图是，当页面来到load功能时，切换链接(所需链接中的当前链接)

在我自己的例子中，这是一个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属性打开一个新选项卡，但它不默认为新选项卡的原点，它刷新整个页面。但是这个方法对我很有效。

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

例如:

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

利用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);
}
相关文章：