Question

我在点击链接时尝试运行ajax功能，但我需要在同一页面上排除指向锚点的链接，这样我就不会尝试在页面内容中重新加载＃＆＃ 39;我只需向下滚动到同一页面的不同部分。

我知道我可以测试href是否包含哈希值，但这不够好：

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

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

如何使用jQuery实现这一目标？

Answer 1

你不需要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没有以#开头，但它仍指向同一网页，则问题将减少为检查字符串是否是另一个字符串的子字符串< / em>的。您可以使用window.location.href和.indexOf()来实现此目的：

if(href.indexOf(window.location.href) > -1) { /* do not run AJAX function */ } else { /* run the AJAX function */ }

window.location.href会返回您所在网页的网址，href.indexOf(window.location.href)会检查window.location.href是否为href的子字符串;

示例：https://www.example.com/page1是https://www.example.com/page1#myDiv
的子字符串
阅读：

Window.location - Web APIs | 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 2

所有浏览器都支持：

＆＃13;

"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');
  }
});

＆＃13;

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

＆＃13;

Answer 3

这是我的看法，更加苗条： -

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

Answer 4

远非完美，但对我有用。别忘了使用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');
});

Answer 5

    /**
     * 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;
    }

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

5 个答案: