![](\"https:\/\/planeta21vek.ru\/elina732\/wp-content\/uploads\/2024\/11\/okno081124.jpg\")
<\/p>\npushState() le permite cambiar la referencia que se utiliza en el encabezado HTTP para los objetos XMLHttpRequest creados despu\u00e9s del cambio de estado. El valor de referente ser\u00e1 la URL del documento cuya ventana es esta en el momento en que se crea el objeto XMLHttpRequest.<\/p>\n
<\/p>\n
pushState() crea una nueva entrada en el historial del navegador, permiti\u00e9ndole volver a p\u00e1ginas anteriores usando el bot\u00f3n Atr\u00e1s. Mientras tanto, la historia. replaceState() reemplaza la entrada actual, evitando as\u00ed la posibilidad de volver a la URL anterior mediante el bot\u00f3n Atr\u00e1s.<\/p>\n
<\/p>\n
Supongamos que el siguiente c\u00f3digo JavaScript se ejecuta en la p\u00e1gina http:\/\/x.org\/foo.html:<\/p>\n
\r\njs\r\nCopy to Clipboard\r\nlet stateObj = {\r\n foo: "bar",\r\n};\r\nhistory.pushState(stateObj, "page 2", "bar.html");\r\n<\/pre>\nEsto dar\u00e1 como resultado que http:\/\/x.org\/bar.html se muestre en la barra de URL, pero el navegador no cargar\u00e1 la p\u00e1gina bar.html ni comprobar\u00e1 si existe.<\/p>\n\n
Ahora digamos que el usuario navega a http:\/\/google.com y luego hace clic en el bot\u00f3n Atr\u00e1s. Como resultado, la URL mostrar\u00e1 http:\/\/x.org\/bar.html y History.state contendr\u00e1 stateObj. El evento popstate no se activar\u00e1 porque la p\u00e1gina se ha recargado. La p\u00e1gina en s\u00ed se ver\u00e1 como bar.html.<\/p>\n
Si el usuario vuelve a hacer clic en el bot\u00f3n Atr\u00e1s, la URL cambiar\u00e1 a http:\/\/x.org\/foo.html y el documento volver\u00e1 a activar un evento popstate, esta vez con el objeto de estado establecido en nulo. En este caso, volver atr\u00e1s tampoco cambia el contenido del documento, como en el paso anterior, aunque el propio documento puede actualizar su contenido despu\u00e9s de recibir el evento popstate.<\/p>\n
El m\u00e9todo pushState() toma tres par\u00e1metros: un objeto de estado, un encabezado (ignorado por ahora) y un par\u00e1metro \u00abURL\u00bb (opcional).<\/strong><\/p>\nstate object. El objeto de estado es un objeto JavaScript asociado con la nueva entrada del historial creada por pushState(). Cada vez que el usuario navega a un nuevo estado, se produce el evento popstate y la propiedad de estado del evento contiene una copia del objeto de estado con entradas del historial.<\/p>\n
Un objeto de estado puede ser cualquier cosa que pueda serializarse. Debido a que Firefox almacena objetos de estado en el disco del usuario para que puedan restaurarse despu\u00e9s de reiniciar el navegador, imponemos un l\u00edmite de 640k caracteres en la representaci\u00f3n serializada del objeto de estado. Si pasa un objeto de estado cuya representaci\u00f3n serializada es mayor que este valor, el m\u00e9todo pushState() generar\u00e1 una excepci\u00f3n. Si necesita mayor almacenamiento, deber\u00eda considerar usar sessionStorage y\/o localStorage.<\/p>\n
title. Encabezado: todos los navegadores excepto Safari ignoran esta configuraci\u00f3n por ahora, pero es posible que lo hagan en el futuro. Debido a cambios futuros en el m\u00e9todo, una soluci\u00f3n segura es pasar una cadena vac\u00eda. Alternativamente, puede pasar un encabezado corto para el estado al que est\u00e1 realizando la transici\u00f3n.<\/p>\n
URL. Este par\u00e1metro pasa la URL de una nueva entrada en el historial. Tenga en cuenta que el navegador no intentar\u00e1 cargar la URL proporcionada inmediatamente despu\u00e9s de llamar a pushState(), pero puede intentar hacerlo m\u00e1s tarde, por ejemplo, despu\u00e9s de que el usuario reinicie el navegador. La nueva URL no tiene por qu\u00e9 ser absoluta; si es relativo, se determina en relaci\u00f3n con la URL actual. La nueva URL debe apuntar al mismo dominio, protocolo y puerto; de lo contrario, pushState() generar\u00e1 una excepci\u00f3n. Este par\u00e1metro es opcional; si no se especifica, se utilizar\u00e1 la URL del documento actual.<\/p>\n
Llamar a pushState() es algo similar a configurar window.location = \u00ab#foo\u00bb en el sentido de que ambos tambi\u00e9n crean y activan otra entrada del historial asociada con el documento actual.<\/p>\n
Pero pushState() tiene varias ventajas:<\/p>\n
La nueva URL puede ser cualquier cosa dentro del mismo dominio, puerto y protocolo que la direcci\u00f3n actual. Mientras que configurar window.location te deja en el mismo documento solo si cambias solo el hash. No es necesario cambiar la URL. Mientras que configurar window.location = \u00ab#foo\u00bb; crea una nueva entrada en el historial solo si el hash actual no es #foo<\/p>\n
Cualquier dato se puede asociar con una nueva entrada en el historial. En el enfoque basado en hash, todos los datos relevantes deben codificarse en una cadena corta. Si los navegadores utilizan posteriormente el encabezado del t\u00edtulo, estos datos se pueden utilizar (independientemente de, por ejemplo, el hash). Tenga en cuenta que pushState() nunca activa el evento hashchange, incluso si la nueva URL difiere de la anterior solo en hash.<\/p>\n
En documentos XUL, crea el elemento XUL especificado. En otros documentos crea un elemento con un URI de espacio de nombres nulo.<\/p>\n
m\u00e9todo reemplazarState(). History.replaceState() funciona exactamente igual que History.pushState(), excepto que replaceState() modifica la entrada del historial actual en lugar de crear una nueva entrada. Tenga en cuenta que no impide que se cree una nueva entrada en el historial global del navegador.<\/strong><\/p>\nreplaceState() es especialmente \u00fatil cuando desea actualizar el objeto de estado o la URL de la entrada del historial actual en respuesta a alguna acci\u00f3n del usuario.<\/p>\n
Supongamos que el siguiente c\u00f3digo JavaScript se ejecuta en la p\u00e1gina http:\/\/x.org\/foo.html:<\/p>\n
\r\nlet stateObj = { foo: "bar" };\r\nhistory.pushState(stateObj, "page 2", "bar.html");\r\n<\/pre>\nSe puede encontrar una explicaci\u00f3n de estas dos l\u00edneas en el ejemplo del m\u00e9todo pushState() anterior.<\/p>\n
A continuaci\u00f3n, supongamos que se ejecuta c\u00f3digo JavaScript en la p\u00e1gina http:\/\/x.org\/bar.html:<\/p>\n
\r\nhistory.replaceState(stateObj, "page 3", "bar2.html");\r\n<\/pre>\nEsto har\u00e1 que http:\/\/x.org\/bar2.html se muestre en la barra de URL, pero el navegador no cargar\u00e1 inmediatamente bar2.html ni comprobar\u00e1 la presencia de esta p\u00e1gina bar2.html.<\/p>\n
Ahora digamos que el usuario va a http:\/\/www.microsoft.com y luego hace clic en el bot\u00f3n Atr\u00e1s. En este caso, http:\/\/x.org\/bar2.html se mostrar\u00e1 en la barra de URL. Si el usuario vuelve a hacer clic en el bot\u00f3n \u00abAtr\u00e1s\u00bb, la barra de URL mostrar\u00e1 http:\/\/x.org\/foo.html y omitir\u00e1 completamente bar.html.<\/p>\n
Evento popstate. El evento popstate aparece en la ventana cada vez que cambia la entrada activa del historial. Si la entrada del historial que se est\u00e1 activando se cre\u00f3 mediante una llamada a pushState o se activ\u00f3 mediante una llamada a replaceState, la propiedad de estado del evento popstate contiene una copia de la entrada del historial del objeto del evento.<\/strong><\/p>\nCuando se carga una p\u00e1gina, puede tener un objeto de evento con un valor distinto de \u00abnulo\u00bb. Esto puede suceder, por ejemplo, si la p\u00e1gina establece un objeto de estado (usando pushState() o replaceState()) y luego el usuario reinicia el navegador. Cuando se recarga la p\u00e1gina, recibir\u00e1 el evento onload, pero no recibir\u00e1 el evento popstate. Sin embargo, si lee la propiedad History.state obtendr\u00e1 el objeto de estado que habr\u00eda obtenido si hubiera ocurrido el evento popstate.<\/p>\n
Usando la propiedad history.state, puede leer el estado de la entrada del historial actual sin esperar el evento popstate, por ejemplo:<\/p>\n
\r\nlet currentState = history.state;\r\n<\/pre>\n\n","protected":false},"excerpt":{"rendered":"pushState() le permite cambiar la referencia que se utiliza en el encabezado HTTP para los objetos XMLHttpRequest creados despu\u00e9s del cambio de estado. El valor de referente ser\u00e1 la URL del documento cuya ventana es esta en el momento en que se crea el objeto XMLHttpRequest.<\/p>\n","protected":false},"author":1,"featured_media":234,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,114,7],"tags":[118,115,116,117],"class_list":{"0":"post-233","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-htmlverstka","8":"category-javascript","9":"category-programmirovanie","10":"tag-onpopstate","11":"tag-pushstate","12":"tag-replacestate","13":"tag-url"},"_links":{"self":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts\/233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":2,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts\/233\/revisions"}],"predecessor-version":[{"id":271,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts\/233\/revisions\/271"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/media\/234"}],"wp:attachment":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/media?parent=233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/categories?post=233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/tags?post=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}