jQuery - 如何测试链接是否在同一页面上锚定？

Question

我正在尝试在单击链接时运行ajax函数,但我需要在同一页面上排除指向锚点的链接,因此当我只是向下滚动到另一个页面时,我不会尝试重新加载页面内容同一页面的一部分.

我知道我可以测试href是否包含哈希但是这还不够好:

if (href.indexOf("#") === -1)

因为我将链接转到另一个页面并滚动到本地锚点.所以我需要测试href是否指向当前页面并包含哈希值.在那种情况下,我会将其从函数中排除.但如果它指向一个不同的页面并包含一个哈希,它仍应包括在内.

我怎样才能用jQuery实现这一目标？

Answer 1

这是我的看法,更加苗条: -

$('a[href*=\\#]').on('click', function (event) {
    if(this.pathname === window.location.pathname){
        // Do something 
    }
});

Answer 2

你不需要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不是以a开头#但仍指向同一网页,则问题将减少为检查字符串是否是另一个字符串的子字符串.你可以利用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

阅读:

• Window.location - Web API | MDN
• String.prototype.indexOf() - JavaScript | MDN

更新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 */

}

Answer 3

所有浏览器都支持:

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