我正在尝试在单击链接时运行 ajax 函数，但我需要排除指向同一页面上的锚点的链接，因此当我只是向下滚动时不会尝试重新加载页面内容到同一页面的不同部分。
我知道我可以测试 href 是否包含哈希，但这还不够：
if (href.indexOf("#") === -1)
因为我会有链接到另一个页面并滚动到本地锚点。所以我需要测试 href 是否指向当前页面并包含哈希。在这种情况下，我会将其排除在功能之外。但如果它指向不同的页面并包含一个哈希值，它仍然应该被包含在内。
如何使用 jQuery 实现这一点？
【问题讨论】：
标签： javascript jquery ajax if-statement
给你，
// extract hash from URL
const hash = new URL(`https://example.com/#your-anchor`).hash; // return => #your-anchor
// if hash exists in the URL, and the anchor is also exists
if(hash.length && document.querySelectorAll(hash).length){
// do something
}
【讨论】：
你不需要 jQuery。只需在 Javascript 中使用正则表达式。
if(/^#/.test(href)) { // .test() returns a boolean
/* do not run AJAX function */
} else {
/* run the AJAX function */
}
解释：
^# 是正则表达式。 // 是您包装正则表达式的位置。^ 表示字符串的开头，# 是您要查找的内容。 .test() 是一个 javascript 函数，它在给定字符串上执行正则表达式并返回一个布尔值。
阅读： RegExp.prototype.test() - JavaScript | MDN
更新 1：
如果href 不是以# 开头，但它仍然指向同一个网页，那么您的问题将简化为检查一个字符串是否是另一个字符串的子字符串。您可以使用window.location.href 和.indexOf() 来实现：
if(href.indexOf(window.location.href) > -1) {
/* do not run AJAX function */
} else {
/* run the AJAX function */
}
window.location.href 返回您所在网页的 URL，href.indexOf(window.location.href) 检查 window.location.href 是否是 href 的子字符串；
示例：https://www.example.com/page1 是https://www.example.com/page1#myDiv 的子字符串
阅读：
更新 2：
@Tib 的好发现。我上面更新的代码没有检查主机名是否相同。我已在下面修复它：
if(<hostnames are the same>) { // make use of window.location.hostname here to get hostname of current webpage
if(href.indexOf(window.location.href) > -1) {
/* do not run AJAX function */
} else {
/* run the AJAX function */
}
} else {
/* do not run AJAX function */
}
【讨论】：
/**
* Checks if the href belongs to the same page and returns the anchor if so.
*
* @param {String} href
* @returns {Boolean|String}
*/
function getSamePageAnchor (href) {
var link = document.createElement('a');
link.href = href;
/**
* For IE compatibility
* @see https://stackoverflow.com/a/24437713/1776901
*/
var linkCanonical = link.cloneNode(false);
if (
linkCanonical.protocol !== window.location.protocol ||
linkCanonical.host !== window.location.host ||
linkCanonical.pathname !== window.location.pathname ||
linkCanonical.search !== window.location.search
) {
return false;
}
return link.hash;
}
【讨论】：
这是我的看法，更苗条：-
$('a[href*=\\#]').on('click', function (event) {
if(this.pathname === window.location.pathname){
// Do something
}
});
【讨论】：
所有浏览器都支持：
"use strict"; // Start of use strict
$('a').bind('click', function(event) {
if (this.pathname == window.location.pathname &&
this.protocol == window.location.protocol &&
this.host == window.location.host) {
alert('links to same page');
event.preventDefault();
} else {
alert('links to a different page');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#same-page">Same Page</a>
<br>
<a href="/users/913950#page">Other Page</a>【讨论】：
&& this.hash，只是为了检查它是否在 URL 中有哈希部分（本地锚点）。
远非完美，但对我有用。 不要忘记使用 jQuery。
玩得开心：
jQuery('a').on('click',function (e) {
var current = window.location.href.split('#')[0];
var goto = jQuery(this).attr('href').split('#')[0];
if (current == goto && this.hash) {
e.preventDefault();
var target = this.hash;
var $target = jQuery(target);
if($target.length){
jQuery('html,body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing');
}
}
});
jQuery('a[href^=#]:not([href=#])').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = jQuery(target);
if($target.length){
history.pushState( null, jQuery('#title').html() , target);
jQuery('html,body').stop().animate({
'scrollTop': $target.offset().top }, 900, 'swing');
}
});
jQuery('a[href=#]').on('click',function (e) {
e.preventDefault();
history.pushState( null, jQuery('#title').html() , location.href.replace(location.hash,""));
jQuery('html,body').stop().animate({
'scrollTop': 0
}, 900, 'swing');
});
【讨论】：