Як ви можете перевірити наявність #hash у URL-адресі за допомогою JavaScript?


783

У мене є який-небудь код jQuery / JavaScript, який я хочу запускати лише тоді, коли #в URL-адресі є прив'язка хеш ( ). Як ви можете перевірити цей символ за допомогою JavaScript? Мені потрібен простий тест, який би визначав такі URL-адреси:

  • example.com/page.html#anchor
  • example.com/page.html#anotheranchor

По суті, щось таке:

if (thereIsAHashInTheUrl) {        
    do this;
} else {
    do this;
}

Якщо хтось міг би вказати мені в правильному напрямку, це було б дуже вдячно.

Відповіді:


1404

Простий:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}

42
Додатково: об’єкт .location доступний лише за URL-адресою поточного вікна, ви не можете цього зробити для довільної URL-адреси (наприклад, такої, що зберігається в рядковій змінній)
Gareth

64
Також властивості місцеположення, такі як .hash та .query, також доступні для елементів <a>
Гарет

19
.searchдоступний на <a>, не .query. Приклад JQuery: $("<a/>").attr({ "href": "http://www.somewhere.com/a/b/c.html?qs=1#fragmenttest" })[0]. .hash => "#fragmenttest"і .search= ?qs=1. Звідти натисніть на запитання про вилучення запитів, щоб отримати щось інше, ніж рядок.
патрон

1
@hitautodestruct: це питання не стосується змін у хеші, а лише чи є він при завантаженні сторінки чи ні.
Гарет

2
@Gareth Так, ти маєш рацію. Щойно зрозумів, що посилання, яке я опублікував, стосується hashchangeподії, а не window.location.hash. Хоча останній не підтримується IE <8.
hitautodestruct

334
  if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      alert (hash);
      // hash found
  } else {
      // No hash found
  }

54

Поставте наступне:

<script type="text/javascript">
    if (location.href.indexOf("#") != -1) {
        // Your code in here accessing the string like this
        // location.href.substr(location.href.indexOf("#"))
    }
</script>

1
Дякуємо, window.location.hash має значення лише у тому випадку, якщо після # є значення. наприклад. //www.example.com# повертає '' під час перевірки хеша.
Джессі

33

Якщо URI не є документом, цей фрагмент буде робити те, що вам потрібно.

var url = 'example.com/page.html#anchor',
    hash = url.split('#')[1];

if (hash) {
    alert(hash)
} else {
    // do something else
}

+1 для Javascript, не знаючи, що виходить за межі :)
Данк,

2
@Dunc: Добре масиви JS - це в основному об'єкти. Доступ до їх індексу, як доступ до властивості об'єкта в такий спосіб: obj['0']. У JS це правда: arr[0] === arr['0']тому, якщо індекс / ключ не існує, повернене значення не визначається замість поза межами. jsfiddle.net/web5me/Mw376
Marc Diethelm

21

Ви пробували це?

if (url.indexOf('#') !== -1) {
    // Url contains a #
}

( urlОчевидно, де ви хочете перевірити URL-адресу.)


17
$('#myanchor').click(function(){
    window.location.hash = "myanchor"; //set hash
    return false; //disables browser anchor jump behavior
});
$(window).bind('hashchange', function () { //detect hash change
    var hash = window.location.hash.slice(1); //hash to string (= "myanchor")
    //do sth here, hell yeah!
});

Це вирішить проблему;)


Цей варіант відповіді сподобався змішанню JS + JQ, крос-браузера та простого рішення, що вже реалізував цей підхід.
Артур Кушман



6

Ось що ви можете зробити, щоб періодично перевіряти на зміну хеша, а потім викликати функцію для обробки значення хеша.

var hash = false; 
checkHash();

function checkHash(){ 
    if(window.location.hash != hash) { 
        hash = window.location.hash; 
        processHash(hash); 
    } t=setTimeout("checkHash()",400); 
}

function processHash(hash){
    alert(hash);
}

11
це лише необхідне, тобто 6 + 7. Усі інші браузери включили подію
onhashchange

@Tokimon - чудово! Я цього не знав. Але я здогадуюсь, ми все ще маємо підтримати ті старі версії IE
Emmanuel

1
Так сумно ... Навіть IE 8 звичайно не піде незабаром, оскільки IE 9 не підтримується на XP :(
Tokimon

1
modernizr.com реалізує подію хеш-обміну на старих браузерах (разом з
низкою

4
Це не рекомендований код взагалі: воно повинно бути по крайней мере: setTimeout(checkHash, 400). Крім того, у сучасних браузерах є hashchangeподія, щоб ви могли це зробити window.addEventListener('hashchange', function(){ … }). Нарешті, витік глобальної hashзмінної - ще одна нерекомендована практика, навіть для прикладу.
Oncle Tom

5

Більшість людей знають про властивості URL-адреси в document.location. Це чудово, якщо вас цікавить лише поточна сторінка. Але питання полягало в тому, щоб можна було розбирати якорі на сторінці, а не на самій сторінці.

Що, здається, більшість людей сумує за тим, що ті самі властивості URL також доступні для якірних елементів:

// To process anchors on click    
jQuery('a').click(function () {
   if (this.hash) {
      // Clicked anchor has a hash
   } else {
      // Clicked anchor does not have a hash
   }
});

// To process anchors without waiting for an event
jQuery('a').each(function () {
   if (this.hash) {
      // Current anchor has a hash
   } else {
      // Current anchor does not have a hash
   }
});

5
function getHash() {
  if (window.location.hash) {
    var hash = window.location.hash.substring(1);

    if (hash.length === 0) { 
      return false;
    } else { 
      return hash; 
    }
  } else { 
    return false; 
  }
}

3
Якщо це не має бути "hash.length" на відміну від "hash.length ()"? :)
Натан Пітман


3

Коментарі Партриджа та Гарета вище. Вони заслуговують на окрему відповідь. Мабуть, властивості хешу та пошуку доступні на будь-якому об’єкті HTML Link:

<a id="test" href="foo.html?bar#quz">test</a>
<script type="text/javascript">
   alert(document.getElementById('test').search); //bar
   alert(document.getElementById('test').hash); //quz
</script>

Або

<a href="bar.html?foo" onclick="alert(this.search)">SAY FOO</a>

Якщо вам знадобиться це у звичайній змінній рядку і у вас є jQuery навколо, це має працювати:

var mylink = "foo.html?bar#quz";

if ($('<a href="'+mylink+'">').get(0).search=='bar')) {
    // do stuff
}

(але його, можливо, трохи переборщили ..)


3

Введення цього сюди як метод абстрагування властивостей місця розташування з довільних рядків, подібних URI. Хоча window.location instanceof Locationце правда, будь-яка спроба викликати Locationскаже вам, що це незаконний конструктор. Ви все ще можете отримати такі речі , як hash, query, і protocolт.д., встановивши рядок якhref властивість DOM анкерного елемента, який потім розділяють всі властивості по адресою з window.location.

Найпростіший спосіб зробити це:

var a = document.createElement('a');
a.href = string;

string.hash;

Для зручності я написав невелику бібліотеку, яка використовує це для заміни нативного Locationконструктора на той, який буде приймати рядки та створювати window.locationподібні об’єкти: Location.js


1

Зазвичай кліки йдуть спочатку, ніж зміни місцеположення, тому після клацання хороша ідея встановитиTimeOut для оновлення window.location.hash

$(".nav").click(function(){
    setTimeout(function(){
        updatedHash = location.hash
    },100);
});

або ви можете прослуховувати місцезнаходження за допомогою:

window.onhashchange = function(evt){
   updatedHash = "#" + evt.newURL.split("#")[1]
};

Я написав плагін jQuery який робить щось на зразок того, що ви хочете зробити.

Це простий якірний маршрутизатор.


1

Ось проста функція, яка повертає trueабо false(має / не має хештегу):

var urlToCheck = 'http://www.domain.com/#hashtag';

function hasHashtag(url) {
    return (url.indexOf("#") != -1) ? true : false;
}

// Condition
if(hasHashtag(urlToCheck)) {
    // Do something if has
}
else {
    // Do something if doesn't
}

Повертається true в цьому випадку.

На основі коментаря @ jon-skeet.


0

Це простий спосіб перевірити це для URL-адреси поточної сторінки:

  function checkHash(){
      return (location.hash ? true : false);
  }

-2

іноді ви отримуєте повний рядок запитів, наприклад "#anchorlink? firstname = mark"

це мій сценарій, щоб отримати хеш-значення:

var hashId = window.location.hash;
hashId = hashId.match(/#[^?&\/]*/g);

returns -> #anchorlink

6
Неможливо, оскільки хеш додається після рядка запиту і ніколи не надсилається на сервер. Єдиний час, коли хеш з’явиться перед рядком запиту, це коли ви змінили URL вручну.

1
Так, але іноді люди надсилають URL-адреси в цьому форматі. це просто так, ви можете отримати лише хеш-значення і нехтувати іншими. :)
Марк
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.