javascript - Modificarea unui șir de interogare fără reîncărcarea paginii

Creez o galerie foto și aș dori să pot schimba șirul de interogare și titlul atunci când fotografiile sunt răsfoite.

Comportamentul pe care îl caut este adesea văzut la unele implementări ale paginii continue/infinite, unde în timp ce derulezi în jos, șirul de interogare continuă să mărească numărul paginii (http://x.com?page=4) etc.. Aceasta ar trebui să fie simplă în teorie, dar aș dori ceva care să fie sigur pe principalele browsere.

Am găsit această postare grozavă și încercam să urmez exemplul cu window.history.pushstate, dar nu pare să funcționeze pentru mine. Și nu sunt sigur dacă este ideal pentru că nu mă interesează cu adevărat să modific istoricul browserului.

Vreau doar să pot oferi posibilitatea de a marca fotografia vizualizată în prezent, fără a reîncărca pagina de fiecare dată când fotografia se schimbă.

Iată un exemplu de pagină infinită care modifică șirul de interogare: http://tumbledry.org/

ACTUALIZARE am găsit această metodă:

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

Răspuns #1

Dacă cauți modificarea Hash-ului, soluția ta funcționează bine. Totuși, dacă vrei să schimbi interogarea, poți folosi pushState, așa cum ai spus. Iată un exemplu care s-ar putea să te ajute să îl implementezi corect. Am testat și a funcționat bine:

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

Nu reîncarcă pagina, ci doar îți permite să schimbi interogarea URL. Nu ai putea schimba valorile protocolului sau ale gazdei. Și, desigur, necesită browsere moderne care pot procesa API-ul de Istorie HTML5.

Pentru mai multe informații:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/ro/docs/Web/Ghid/API/DOM/Manipularea_istoricului_browserului

Răspunsul #2

Întrebare veche, răspuns modern pentru a ajuta dezvoltatorii viitori; folosind interfața URL:

const url = new URL(window.location.href);
url.searchParams.set('key', value);
window.history.pushState(null, '', url.toString());

Acest lucru asigură, de asemenea, că modificați doar parametrul de interogare specificat.

Răspunsul #3

Vreau să îmbunătățesc răspunsul lui Fabio și să creez o funcție care adaugă o cheie personalizată la șirul URL fără a reîncărca pagina.

 function insertUrlParam(key, value) {
        if (history.pushState) {
            let searchParams = new URLSearchParams(window.location.search);
            searchParams.set(key, value);
            let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
            window.history.pushState({path: newurl}, '', newurl);
        }
    }

// to remove the specific key
export function removeUrlParameter(paramKey) {
  const url = window.location.href
  console.log("url", url)
  var r = new URL(url)
  r.searchParams.delete(paramKey)
  const newUrl = r.href
  console.log("r.href", newUrl)
  window.history.pushState({ path: newUrl }, '', newUrl)
}

Răspunsul #4

Dacă vrem pur și simplu să actualizăm parametrul de interogare fără a atingere alte părți ale URL-ului, nu este nevoie să construim URL-ul din nou. Aceasta este ceea ce folosesc:

const addQueryParam = (key, value) => {
  const url = new URL(window.location.href);
  url.searchParams.set(key, value);
  window.history.pushState({}, '', url.toString());
};

const getQueryParam = (key) => {
  const url = new URL(window.location.href);
  return url.searchParams.get(key) || '';
};