Geïntroduceerd sinds Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 introduceert twee methoden, histtory.pushState() en history.replaceState(), waarmee geschiedenisentiteiten kunnen worden toegevoegd en gewijzigd. Tegelijkertijd werken deze methoden met het window.onpostate-evenement.
Wijzig de referrer met behulp van de history.pushState()-methode, die kan worden gebruikt in de http-header die is aangemaakt voor het xmlhttpRequest-object nadat de status is gewijzigd. Deze referrer zal de URL van het document zijn wanneer het XMLHttpRequest is aangemaakt.
pushState wordt gebruikt om een record van de huidige pagina aan de geschiedenis toe te voegen, terwijl replaceState en pushState exact hetzelfde worden gebruikt, het enige verschil is dat het wordt gebruikt om het record van de huidige pagina in de geschiedenis te wijzigen.
voorbeeld
Stel dat http://mozilla.org/foo.html pagina JS uitvoert
var stateObj = { foo: "bar" }; history.pushState (stateObj, "pagina 2", "bar.html");
Deze methode zorgt ervoor dat de URL-adresbalk http://mozilla.org/bar.html weergeeft,Maar de browser laadt bar.html pagina niet, zelfs als die bestaat,。
Ga er nu weer van uit dat de gebruiker de http://google.com blijft openen en terugklikt. Op dit moment zal de adresbalk van de url http://mozilla.org/bar.html de pagina een popstate-event (chrome) ontvangen, dat een kopie van stateObj bevat. Deze pagina lijkt foo.html. +
Op dat moment klikken we weer terug, en de URL verandert http://mozilla.org/foo.html,document krijgt een nieuw popstate-event en een null-toestand-object. Deze retouractie verandert de inhoud van het document niet. (Misschien probeert hij na een tijdje te laden...) Chrome)
pushState-methode
pushState() heeft drie parameters: statusobject, titel (nu genegeerd, niet meer verwerkt), URL (optioneel). Details:
· Toestandobject – Het toestandobject is een Javascrip{filter}t-object dat betrekking heeft op een nieuwe geschiedenisentiteit die is aangemaakt door de pushState()-methode. Gebruikt om informatie op te slaan over de vermeldingen die je in de geschiedenis wilt plaatsen. Het Toestandsobject kan elke Json-string zijn. Omdat Firefox de harde schijf van de gebruiker gebruikt om toegang te krijgen tot het statusobject, is de maximale opslagruimte van dit object 640k. Als deze groter is dan deze waarde, gooit de pushState()-methode een uitzondering. Als je meer ruimte nodig hebt om op te bergen, gebruik dan lokale opslag.
· titel—Firefox negeert deze parameter nu, hoewel deze in de toekomst mogelijk gebruikt kan worden. De veiligste manier om het nu te gebruiken is door een lege string door te geven om toekomstige aanpassingen te voorkomen. Of je kunt een korte titel doorgeven om de staat aan te geven
· URL - Deze parameter wordt gebruikt om de URL van de nieuwe geschiedenisentiteit door te geven; let op dat de browser deze URL niet zal laden nadat de pushState()-methode is aangeroepen. Maar misschien probeert hij na een tijdje deze URL te laden. Bijvoorbeeld, nadat de gebruiker de browser opnieuw heeft opgestart, kan de nieuwe URL geen absoluut pad zijn. Als het een relatief pad is, dan zal het relatief zijn aan de bestaande URL. De nieuwe url moet co-domein zijn met de bestaande url, anders zal pushState() een uitzondering gooien. Deze parameter is optioneel, en als deze leeg is, wordt deze als de huidige URL van het document weergegeven.
In zekere zin is het aanroepen van de pushState()-methode vergelijkbaar met het instellen van window.locatio{filter}n = "#foo", waarbij beide een andere geschiedenisentiteit aanmaken en activeren die aan het huidige document is gekoppeld, maar pushState() heeft enkele extra voordelen:
De nieuwe URL kan elke URL zijn die in hetzelfde domein zit als de huidige URL, in tegenstelling tot window.locatio{filter}n die in hetzelfde document blijft als alleen hash is ingesteld.
Je kunt de URL ongewijzigd laten als dat niet nodig is. Ter vergelijking, stel window.locatio{filter}n = "#foo"; Er worden alleen nieuwe geschiedenis-entiteiten gegenereerd als je huidige hash niet #foo
Je kunt willekeurige gegevens koppelen aan je nieuwe geschiedenis-entiteit. Bij een hash-gebaseerde aanpak moet alle relevante data in een korte string worden gecodeerd.
Let op dat de pushState()-methode de hashchange-tijd niet laat plaatsvinden, zelfs niet als de oude en nieuwe urls gewoon verschillende hashes zijn.
replaceState()-methode
history.replaceState() wordt veel gebruikt zoals pushState(), behalve dat replaceState() wordt gebruikt om de huidige geschiedenisentiteit te wijzigen in plaats van een nieuwe aan te maken. Deze methode kan soms nuttig zijn wanneer je een statusobject of de huidige geschiedenisentiteit moet bijwerken als reactie op bepaald gebruikersgedrag, en je kunt het gebruiken om de URL van het toestandsobject of de huidige geschiedenisentiteit bij te werken.
Popstate-evenement
Wanneer de geschiedenisentiteit wordt gewijzigd, vindt het popstate-event plaats. Als de geschiedenisentiteit wordt gegenereerd door de methoden pushState en replaceState, zal het statusattribuut van het popstate-event een kopie van het statusobject uit de geschiedenisentiteit bevatten
Zie window.onpopstate voor details
Lees de huidige staat
Lees de huidige staat
Wanneer de pagina laadt, kan deze een niet-lege toestandsobject hebben. Dit kan gebeuren wanneer de pagina een statusobject instelt (met pushState of replaceState) en de gebruiker de browser opnieuw opstart. Wanneer de pagina opnieuw laadt, ontvangt de pagina een onload-event, maar er is geen popstate-event. Als je echter de history.state-eigenschap leest, krijg je dit state-object nadat het popstate-event plaatsvindt
History.pushState() documentatie: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
De parameter van de ontvangende URL is van het type string, die wordt gebruikt om de URL van de huidige adresbalk te wijzigen. Een punt om op te merken is dat deze parameter niet hetzelfde kan zijn als cross-domain, dat wil zeggen dat het protocol, de domeinnaam en de poort hetzelfde moeten zijn.
Uncaught DOMException: Niet uitgevoerd 'pushState' op 'History': Een history state-object met URL 'http://www.test.com/' kan niet worden aangemaakt in een document met origin ' https://www.itsvse.com' en URL 'https://www.itsvse.com/'.
op <anonymous>:1:9
Correcte code:
|
Geplaatst op 12-09-2017 13:55:04
|
|
|
|
Geplaatst op 27-10-2017 09:51:10