时间戳

首页 > 解决方案 > 更改标签 href 取决于 window.location.href

javascript - 更改标签 href 取决于 window.location.href

问题描述

我尝试创建一个 jQuery 片段来检测窗口的 url并取决于窗口的 href，更改a 标签的 href 。

我的代码到目前为止：

(function($) {
  "use strict";
  $(document).ready(function() {
    $(window).on('load', function() {
      var changeLink = document.getElementById("LinkTag");
      console.log('it is running');
      if ($(window).location.href() == "pageUrl") {
        changeLink.href = "website1";
      } else {
        changeLink.href = "website2";
      }
    });
  });
})(jQuery);

谢谢

标签： javascriptjquery

解决方案

这里发生了很多事情：

  1. location.href不是 jQuery 方法；它是常规窗口对象的属性。使用window.location.href而不是$(window).location.href().
  2. 看起来您正在尝试匹配字符串“pageUrl”而不是变量 - 除非这是作为问题中的示例字符串，否则变量名称不应包含在引号中。
  3. 您可能不想匹配 full window.location.href，其中包括在仍指向同一页面时可能会发生变化的内容（例如协议、子域、哈希和 URL 参数）；window.location.pathname通常是更安全的选择（假设您尝试匹配特定页面。）
  4. 不必将脚本包装在 IIFE 和 adocument.ready和 awindow.onload中。我已经删除了这里的冗余层。
  5. （可选）混合使用 jQuery 方法和 vanilla 方法可能难以维护，因为您必须跟踪哪些变量包含 jQuery 对象以及哪些包含对常规 DOM 节点的引用。由于您已经在其他地方获得了 jQuery，因此我在这里将您document.getElementById的 jQuery 换成了等效的 jQuery。

$(document).ready(function() {
  var pageUrl = "/js"; // This is the path when running in a stackoverflow snippet
  var changeLink = $("#LinkTag");
  if (window.location.pathname == pageUrl) {
    changeLink.attr("href","//example.com");
  } else {
    changeLink.attr("href","//somethingelse.com");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="LinkTag">Link</a>

推荐阅读