Вызов яваскрипта функции, когда URL меняет

Question

Я не уверен, какую тему я ищу, но вот описание того, что я пытаюсь достичь:

• При изменении URL, Javascript метод должен вместо того, чтобы загружать страницу этого URL-адреса.

Причина, по которой я пытаюсь это сделать, заключается в том, что для целей SEO мне нужно использовать сегментированные URL-адреса. Тем не менее, я также пытаюсь создать «новую страницу» на лету, используя предварительно загруженные HTML-шаблоны. Поэтому вместо загрузки новой страницы я просто хочу вызвать связанный метод, который будет отображать страницу с использованием шаблонов.

Возможно ли такое поведение?

Примечание: Я думаю, что стоит упомянуть, что существующая система в настоящее время использует хеш URL, чтобы определить, будет ли загружена новая страница.

С уважением,

Эрвин

Answer 1

вам нужно добавить обработчик щелчка для всех ссылок, где вы предотвратить действие по умолчанию и сделать ваш редирект. с jQuery это может быть так просто:

$(document).ready(function() { 
    $('a').on('click', function() { 
    $(location).attr('href','your_url'); // redirect wherever you want to go 
    return false; 
    });  
}); 

Answer 2

Я сделал что-то подобное недавно.
Предполагая, что я понимаю, что вы после этого, вот слушателя, который выполняет функцию изменения хэша

var last_hash = ""; 

setInterval(function(){ 
    hash = window.location.hash; 

    if(last_hash != hash && hash.length != 1){ 
     hash = hash.substring(1) 

     //Making sure that there's actually a function with that name 
     if(typeof window[hash] == 'function'){ 
      var fn = window[hash]; 

      //Execute the function 
      fn.apply({param: "param1"}, ["param1", "param2"]); 
     } 
     last_hash = window.location.hash; 
    } 
}, 250); 

Вы можете сделать некоторый дополнительный разбор хэша, отделяя имя функции и параметры, а затем добавить все параметры для массива, чтобы перейти к .apply, но я оставляю эту часть до вас.

Если вы используете фактические URL-адреса, а не хэш, просто убедитесь, что вы предотвращаете поведение ссылок по умолчанию на странице и любые ссылки, которые вы впоследствии загрузите после этого.

function attach_disablelinks(){ 
    $("a").on("click", function(e){ 
     e.preventDefault(); 
    }); 
}