使用javascript根据当前页面的路径名更改按钮上的href答案

【问题标题】：change href on a button according to the pathname of the current page with javascript使用javascript根据当前页面的路径名更改按钮上的href
【发布时间】：2022-01-22 04:25:50
【问题描述】：

为了避免重复网页，我正在寻找一种方法来根据页面的相对链接更改按钮中的链接。

假设我们在网站https://mywebsite.com/，我们想将用户发送到https://othersite.com/（这些网站作为示例给出

这是我想做的：

如果当前链接是https://mywebsite.com/，则按钮应提供此链接 https//othersite.com/
如果当前链接是https://mywebsite.com/?utm_source=facebook，那么同一个按钮必须提出这个链接https://othersite.com/?value=facebook
如果当前链接是https://mywebsite.com/?utm_source=twitter，那么同一个按钮必须提出这个链接https://othersite.com/?value=twitter
等

简而言之，我正在寻找一种方法来根据页面的当前链接来改变 href 属性中按钮的链接。

我刚开始使用 javascript。我远未理解这种语言的所有微妙之处。

这是我尝试过的，但它（显然）不起作用：

<html>
  <head></head>
  <body>
    <a href="javascript:location.assign" >Click here</a> 
    <script>
      if (location.pathname === "/") {
location.assign("https//othersite.com/");
    }
      if (location.pathname === "/?utm_source=facebook") {
location.assign("https://othersite.com/?value=facebook");
    }
      if (location.pathname === "/?utm_source=twitter") {
location.assign("https://othersite.com/?value=twitter");
    }
    </script>
  </body>
</html>

这里还有一些我认为有用但无法解决我的问题的资源：

感谢您的帮助和时间！

【问题讨论】：

标签： javascript href relative-url

【解决方案1】：

使用getElementById 并改为设置href...下面的解决方案有效。

<html>
      <head></head>
      <body>
        <a href="#" id="link">Click here</a> 
        <script>
          var link = document.getElementById('link')
          
          if (location.pathname === "/") {
    link.href = "https//othersite.com/";
     }
          if (location.pathname === "/?utm_source=facebook") {
    link.href = "https://othersite.com/?value=facebook";
        }
          if (location.pathname === "/?utm_source=twitter") {
    link.href = "https://othersite.com/?value=twitter";
        }
        </script>
      </body>
    </html>

【讨论】：

你好机器人瑞克。谢谢您的帮助！我试过你的代码。当我单击“单击此处”时，当前页面的链接变为相同，但末尾带有 #。你知道为什么吗？
您在哪里尝试此代码？你是偶然在 codepen 中尝试的吗？
我直接在我的网站上试了一下
哦，我看到@CdyM 您正在使用 location.pathname 并检查查询参数的问题... location.pathname 删除查询参数。因此，对于后两个条件，您需要将它们更改为：if (location.href.indexOf('/?utm_source=facebook') > -1) link.href="change you want"
嘿@Robo Rick！我试过了，但这不起作用。我暂时找不到解决方案...感谢您的宝贵时间！

【解决方案2】：

您没有使用您的代码访问该链接

这里的代码会更好。我使用查找表

请注意，下面的代码实际上不允许在 SO 此处打开链接，但可以在您的服务器上运行

const locations = {
  "/js": "https://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work",
  "/": "https//othersite.com/",
  "/?utm_source=facebook": "https://othersite.com/?value=facebook",
  "/?utm_source=twitter": "https://othersite.com/?value=twitter"
}

window.addEventListener("DOMContentLoaded", function() { // elements are available
  document.getElementById("link").addEventListener("click", function(e) {
    console.log(location.pathname,locations[location.pathname])
    const loc = locations[location.pathname]
    if (loc) this.href = loc;
  })
})

&lt;a href="#" id="link" target="_blank"&gt;Click here&lt;/a&gt;

【讨论】：

你好 mplungjan。谢谢您的帮助！我试过你的代码。当我单击“单击此处”时，当前页面的链接变为相同，但末尾带有 #。你知道为什么吗？
感谢添加精度！在我的网站上，这不起作用......如果我点击按钮，当前链接仍然是相同的，但末尾有一个 #。
如果你离开console.log，它会说什么？
无论有没有console.log，都会发生同样的事情。
请将记录的内容发布到控制台。路径名可能不完全是测试的内容。您是否将 ID 添加到链接中？