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

我试图在链接被点击时运行ajax函数，但我需要排除链接到同一页面上的锚点，所以我不尝试重新加载页面内容时，我只是向下滚动到同一页面的不同部分。jQuery - 如何测试链接是否在同一页面上锚定？

我知道我可以测试HREF包括散列但是这还不够好：

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

因为我有去到另一个页面，滚动到一个本地锚链接。所以我需要测试href是否指向当前页面并包含散列。在那种情况下，我会将它从函数中排除。但是如果它指向一个不同的页面并且包含一个散列，它应该仍然包含在内。

我怎样才能实现这与jQuery？

来源

2015-11-20 Benek Lisefski

你不需要这个jQuery。只需在Javascript中使用正则表达式。

if(/^#/.test(href) === true) { 

    /* do not run AJAX function */ 

} else { 

    /* run the AJAX function */ 

}

说明：

^#是正则表达式。 //是你包装你的正则表达式的地方。^意味着在字符串的开头，#是你正在寻找的东西。 .test()是一个javascript函数，它对给定的字符串执行regex并返回一个布尔值。

读了起来：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 */ 

}

来源

2015-11-20 03:58:31

ŧ hanks拉胡尔，但只是测试，看看散列是强者的第一个字符是不够的。这些是CMS页面，导航链接在每个页面上都有相同的URL。在主页上，这些链接将锚定在同一页面上，在其他页面上锚定在主页上。所以哈希不会在一开始。我需要可靠地测试href是否会转到当前页面或转到其他页面。 –

@BenekLisefski请在上面的答案中结帐**更新1 **。 –

我最终调整了我的计划并找到了另一种解决方法，不过谢谢你的详细解答。 –

远非完美，但为我工作。不要忘记使用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'); 
});

来源

2016-03-09 17:19:37

支持所有浏览器：

"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="https://stackoverflow.com/users/913950#page">Other Page</a>

来源

2017-01-27 14:18:04 Rodrigo

做了同样的事情，但添加了&& this.hash到最后只是为了检查它是否在URL中有哈希部分（本地锚）。 –

这是我拿，更苗条： -

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

来源

2017-11-29 09:38:19 Molemann

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

回答

相关问题