使用 jQuery 持久化 URL 查询字符串会破坏锚点

Question

我使用以下 jQuery 脚本在我的整个网站上保留某个查询字符串。但是，一旦 html 锚点 link 被调用

，它会破坏 html 锚点，因为它会将字符串第二次附加到 URL

示例：

预期行为：www.example.com/?string=value ---> www.example.com/?string=value#anchor

实际结果：www.example.com/?string=value ---> www.example.com/?string=value#anchor?string=value

function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

jQuery(document).ready(function ($) {
var persistedQueryParam = getParameterByName('STRINGNAME');

if (persistedQueryParam && persistedQueryParam.length > 0) {
$('a[href]').each(function () {
  var elem = $(this);
  var href = elem.attr('href');
  elem.attr('href', href + (href.indexOf('?') != -1 ? '&' : '?') + 'STRINGNAME=' + persistedQueryParam);
});
}
});

有什么解决办法吗？我尝试通过 href.indexOf('#') 检查哈希，但无法正常工作。似乎我无法检查 URL，因为锚点是在单击时添加的。

Answer 1

我想出了一个解决方案：问题是，html 锚点也在 href 中。我通过排除以 #:

开头的链接解决了这个问题

$('a[href]').not('a[href^="#"]').each

但是，这意味着包含 url 和锚点（如 www.example.com/page#anchor）的链接将加载页面，但不会跳转到锚点。不过与我无关。

使用 jQuery 持久化 URL 查询字符串会破坏锚点

Persisting URL query string with jQuery breaks anchors

anchor

jquery

query-string