Dinamiska URL maiņa, izmantojot JavaScript
Strādājot ar modernām tīmekļa lietojumprogrammām, iespējams, būs jāmaina URL, neizraisot lapas atkārtotu ielādi. Tas var būt īpaši noderīgi, lai izveidotu nevainojamu lietotāja pieredzi.
Šajā rokasgrāmatā mēs izpētīsim metodes, kā mainīt URL daļu pēc domēna, tostarp metodes, kas ļauj piekļūt daļai pirms jaucējzīmes (#). Tas nodrošina atbilstību starpdomēnu politikām, vienlaikus panākot vēlamo URL modifikāciju.
| Komanda | Apraksts |
|---|---|
| history.pushState() | Pievieno jaunu ierakstu pārlūkprogrammas sesiju vēstures kaudzē, mainot URL, nepārlādējot lapu. |
| window.history.pushState() | Atjaunina pašreizējo vēstures ierakstu ar jauniem stāvokļa datiem un jaunu URL. |
| window.location.hash | Iegūst vai iestata URL enkura daļu, kas seko jaucējzīmei (#). |
| function changeURL(newPath) | Definē funkciju, kas atjaunina URL ceļu, izmantojot vēstures API. |
| function updateHash(newHash) | Definē funkciju, kas atjaunina URL hash. |
Detalizēts skaidrojums par URL modifikācijām JavaScript
Pirmais skripts izmanto history.pushState() metodi, kas ir daļa no vēstures API. Šī komanda ļauj izstrādātājiem pievienot jaunu ierakstu pārlūkprogrammas sesiju vēstures kaudzē, efektīvi mainot adreses joslā redzamo URL, nepārlādējot lapu. Skriptā, const newURL = "/page2.php"; nosaka jauno ceļu, un history.pushState(null, "", newURL); maina URL uz šo jauno ceļu. Iesaiņojot history.pushState komanda tādā funkcijā kā function changeURL(newPath), mēs varam dinamiski atjaunināt URL pēc vajadzības. Šis paņēmiens ir īpaši noderīgs vienas lapas lietojumprogrammām (SPA), kur saturs dinamiski mainās, nepārlādējot visu lapu.
Otrais skripts maina URL jaucējkodu, izmantojot window.location.hash. Šis rekvizīts iegūst vai iestata URL enkura daļu, kas seko jaucējzīmei (#). Ar iestatījumu const hashValue = "newSection"; un window.location.hash = hashValue;, URL jaucējkods tiek mainīts uz #newSadaļa, nepārlādējot lapu. Šī pieeja ir noderīga, lai pārvietotos tajā pašā lapā vai izveidotu saiti uz noteiktām dokumenta sadaļām. Turklāt funkcija function updateHash(newHash) iekapsulē šo funkcionalitāti, ļaujot viegli dinamiski mainīt URL jaucējdaļu. Abi skripti nodrošina nevainojamus veidus, kā modificēt URL un uzlabot lietotāja pieredzi, izvairoties no nevajadzīgas lapu atkārtotas ielādes.
Vēstures API izmantošana, lai mainītu URL bez atkārtotas ielādes
JavaScript ar vēstures API
const newURL = "/page2.php";history.pushState(null, "", newURL);// This changes the URL to /page2.php without reloading the pagefunction changeURL(newPath) {window.history.pushState({}, "", newPath);}// Example usagechangeURL("/page2.php");
Manipulēšana ar URL jaukšanu bez atkārtotas ielādes
JavaScript jaucējkoda modificēšanai
const hashValue = "newSection";window.location.hash = hashValue;// This changes the URL hash to #newSectionfunction updateHash(newHash) {window.location.hash = newHash;}// Example usageupdateHash("newSection");
Papildu metožu izpēte URL modifikācijai bez atkārtotas ielādes
Vēl viens URL pārveidošanas aspekts bez lapas atkārtotas ielādēšanas ietver replaceState() metodi no vēstures API. Kamēr pushState() pievieno jaunu vēstures ierakstu, replaceState() maina pašreizējo vēstures ierakstu. Tas var būt īpaši noderīgi, ja vēlaties mainīt URL, nepārblīvējot lietotāja vēsturi ar vairākiem stāvokļiem. Piemēram, ja jums ir vienas lapas lietojumprogramma, kuras saturs bieži mainās, iespējams, vēlēsities atjaunināt URL, lai atspoguļotu pašreizējo stāvokli, nepievienojot katras izmaiņas vēsturē. Tas saglabā atpakaļ pogas funkcionalitāti tīru un lietotājam draudzīgu.
Izmantot replaceState(), varat uzrakstīt funkciju, kas līdzīga changeURL() bet tā vietā piezvaniet history.replaceState() tajā iekšā. Piemēram, function replaceURL(newPath) varētu izmantot history.replaceState(null, "", newPath); lai atjauninātu URL. Šis paņēmiens ir vērtīgs, lai uzlabotu lietotāju pieredzi, saglabājot URL sinhronizācijā ar lietojumprogrammas stāvokli, neradot nevajadzīgus vēstures ierakstus. Turklāt tas piedāvā efektīvāku veidu, kā pārvaldīt pārlūkprogrammas vēsturi, īpaši dinamiskās tīmekļa lietojumprogrammās.
Bieži uzdotie jautājumi par vietrāžu URL pārveidošanu bez atkārtotas ielādes
- Kāda ir atšķirība starp pushState() un replaceState()?
- pushState() pievieno jaunu ierakstu sesijas vēstures stekam, savukārt replaceState() maina pašreizējo vēstures ierakstu.
- Vai varu mainīt URL jaucējkodu, nepārlādējot lapu?
- Jā, izmantojot window.location.hash, varat mainīt URL jaucējkodu, nepārlādējot lapu.
- Vai ir iespējams modificēt tikai URL vaicājuma parametrus?
- Jā, varat atjaunināt vaicājuma parametrus, izmantojot pushState() vai replaceState() metodes, nepārlādējot lapu.
- Vai maina URL ar pushState() ietekmēt atpakaļ pogu?
- Jā, katrs zvans uz pushState() izveido jaunu vēstures ierakstu, tāpēc poga Atpakaļ pārvietojas pa šiem stāvokļiem.
- Vai es varu izmantot šīs metodes visās pārlūkprogrammās?
- Lielākā daļa mūsdienu pārlūkprogrammu atbalsta vēstures API, tostarp pushState() un replaceState(), taču vienmēr pārbaudiet saderību.
- Kā rīkoties ar popstate notikumiem, izmantojot pushState()?
- Jūs varat klausīties par popstate notikumu, lai apstrādātu izmaiņas aktīvajā vēstures ierakstā un attiecīgi atjauninātu lietotāja saskarni.
- Kas notiek, ja URL formāts ir nepareizs, lietojot pushState()?
- Ja URL formāts ir nepareizs, pushState() radīs kļūdu, tāpēc pārliecinieties, vai jūsu URL ir pareizi formatēti.
Noslēdzot tēmu
Pārveidojot URL, nepārlādējot lapu JavaScript, var ievērojami uzlabot lietotāja pieredzi, radot vienmērīgāku navigāciju un izvairoties no nevajadzīgas lapas atkārtotas ielādes. Vēstures API izmantošana pushState() un replaceState() Metodes ļauj izstrādātājiem dinamiski atjaunināt URL, sinhronizējot lietojumprogrammas stāvokli, nepārblīvējot pārlūkprogrammas vēsturi. Turklāt, manipulējot ar URL jaucējfunkciju, var nodrošināt efektīvu navigāciju lapā. Šo metožu izpratne un ieviešana ir būtiska, lai izstrādātu mūsdienīgas, atsaucīgas tīmekļa lietojumprogrammas.