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 - 如何測試鏈接是否在同一頁面上錨定？

回答

相關問題