Modyfikowanie ciągu zapytania bez ponownego ładowania strony

Question

Tworzę galerię zdjęć i chciałbym móc zmienić ciąg zapytania i tytuł podczas przeglądania zdjęć.

Zachowanie, którego szukam, jest często postrzegane w przypadku niektórych implementacji strony ciągłej/nieskończonej, gdzie podczas przewijania w dół ciąg zapytania zwiększa numer strony (http://x.com?page=4) itd. To powinno być proste w teorii, ale ja chciałbym czegoś bezpiecznego w głównych przeglądarkach.

Znalazłem this great post i próbowałem podążać za przykładem z window.history.pushstate, ale to nie działa dla mnie. I nie jestem pewien, czy to jest idealne, ponieważ tak naprawdę nie obchodzi mnie modyfikowanie historii przeglądarki.

Po prostu chcę mieć możliwość dodania zakładki do aktualnie oglądanego zdjęcia, bez ponownego ładowania strony za każdym razem, gdy zdjęcie zostanie zmienione.

Oto przykład nieskończonej strony, która modyfikuje ciąg kwerendy: http://tumbledry.org/

UPDATE znaleźć tą metodą:

window.location.href = window.location.href + '#abc'; 

wydaje się pracować dla mnie, ale jestem na nowym chromem. Prawdopodobnie spowodowałoby to problemy ze starszymi przeglądarkami?

Answer 1

Jeśli szukasz modyfikacji Hash, Twoje rozwiązanie działa poprawnie. Jeśli jednak chcesz zmienić zapytanie, możesz użyć funkcji pushState, tak jak powiedziałeś. Oto przykład, który może pomóc w jego prawidłowym wdrożeniu. Testowałem i działało dobrze:

if (history.pushState) { 
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1'; 
    window.history.pushState({path:newurl},'',newurl); 
} 

Nie przeładowuje strony, ale pozwala tylko na zmianę zapytania URL. Nie można zmienić protokołu ani wartości hosta. Oczywiście wymaga to nowoczesnych przeglądarek, które mogą przetwarzać interfejs API historii HTML5.

Aby uzyskać więcej informacji:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Answer 2

Następnie interfejs API historii jest dokładnie tym, czego szukasz. Jeśli chcesz również obsługiwać starsze przeglądarki, poszukaj biblioteki, która ponownie manipuluje tagiem skrótu adresu URL, jeśli przeglądarka nie udostępnia interfejsu API historii.

Answer 3

Użyłem następujące biblioteki JavaScript z wielkim sukcesem:

https://github.com/balupton/jquery-history

Wspiera Historia HTML5 API, jak również metoda awaryjna (używająC#) dla starszych przeglądarek.

Ta biblioteka jest zasadniczo polyfillem w pobliżu `history.pushState '.

Answer 4

budynku off odpowiedzi Fabio, stworzyłem dwie funkcje, które prawdopodobnie będą przydatne dla każdego, natrafiają na to pytanie. Za pomocą tych dwóch funkcji można wywołać insertParam() z kluczem i wartością jako argumentem.Zostanie dodany parametr adresu URL lub, jeśli parametr zapytania już istnieje z tym samym kluczem, zmieni ten parametr na nową wartość:

//function to remove query params form a url 
function removeURLParameter(url, parameter) { 
    //prefer to use l.search if you have a location/link object 
    var urlparts= url.split('?'); 
    if (urlparts.length>=2) { 

     var prefix= encodeURIComponent(parameter)+'='; 
     var pars= urlparts[1].split(/[&;]/g); 

     //reverse iteration as may be destructive 
     for (var i= pars.length; i-- > 0;) {  
      //idiom for string.startsWith 
      if (pars[i].lastIndexOf(prefix, 0) !== -1) { 
       pars.splice(i, 1); 
      } 
     } 

     url= urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : ""); 
     return url; 
    } else { 
     return url; 
    } 
} 

function insertParam(key, value) { 
    if (history.pushState) { 
     // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1'; 
     var currentUrl = window.location.href; 
     //remove any param for the same key 
     var currentUrl = removeURLParameter(currentUrl, key); 

     //figure out if we need to add the param with a ? or a & 
     var queryStart; 
     if(currentUrl.indexOf('?') !== -1){ 
      queryStart = '&'; 
     } else { 
      queryStart = '?'; 
     } 

     var newurl = currentUrl + queryStart + key + '=' + value 
     window.history.pushState({path:newurl},'',newurl); 
    } 
}