2009-05-04 19 views
53

Estoy cambiando el src de un IFRAME para volver a cargarlo, funciona bien y activar el evento onload cuando se carga su HTML.Recargar un IFRAME sin agregar al historial

Pero agrega una entrada al historial, que no quiero. ¿Hay alguna forma de volver a cargar un IFRAME y aún así no afectar el historial?

+5

estoy adivinando el problema es el botón de retroceso recorrerá realmente el iframe antes de ir a la página anterior. –

+1

Hagas lo que haga, no quiero ninguna adición a la historia, ¿o hay alguna forma de que pueda eliminar la última entrada de historial? –

Respuesta

27

Puede usar javascript location.replace:

window.location.replace('...html'); 

sustituir el documento actual con el uno en la URL proporcionada. La diferencia a partir del método de asignación() es que después de usar sustituir la actual página no se guardará() en el historial de la sesión , lo que significa que el usuario no será capaz de utilizar el botón Atrás para navegar hacia él.

+2

¿No sería este objetivo la página en sí? Solo quiero volver a cargar el IFRAME y no tengo control sobre los scripts que se ejecutan dentro del documento cargado. –

+5

Simplemente reemplace "ventana" con una referencia a su iframe. – Ishmael

+0

¡No es tan simple! –

17

Como Greg dijo anteriormente, la función .replace() es cómo hacer esto. Parece que no puedo entender cómo responder a su respuesta *, pero el truco está en hacer referencia a la propiedad iFrames contentWindow.

var ifr = document.getElementById("iframeId"); 
ifr.contentWindow.location.replace("newLocation.html"); 

* acaba de aprender que necesito más reputación a comentar una respuesta.

60

El uso de replace() es solo una opción con su propio dominio iframes. No funciona en sitios remotos (por ejemplo, un botón de Twitter) y requiere conocimientos específicos del explorador para acceder de manera confiable a la ventana secundaria.

En su lugar, simplemente elimine el elemento iframe y construya uno nuevo en el mismo lugar. Los elementos del historial solo se crean cuando modifica el atributo src después de que está en el DOM, así que asegúrese de configurarlo antes del apéndice.

Editar: JDandChips correctamente menciona que puede eliminar de DOM, modificar y volver a agregar. No es necesario construir frescos.

+4

Si bien esta respuesta es 2 años más reciente que la respuesta aceptada, es la forma correcta de cambiar una URL/src de un iframe sin agregar al historial del navegador. Cualquier otra combinación de window.frames [frameName] .location y/o history.replaceState no funcionará en un iframe por razones de seguridad. Incluso en el mismo dominio (como acabo de descubrir). –

+0

Esta es la mejor respuesta de trabajo que he probado. Resolvió mi problema – pppglowacki

+0

¡La solución fue esta! Necesitaba crear el iframe para que el historial permanezca intacto. – roq

5

intentar usar esta función para reemplazar iframe viejo con lo nuevo marco flotante que se copia desde antiguo:

function setIFrameSrc(idFrame, url) { 
    var originalFrame = document.getElementById(idFrame); 
    var newFrame = document.createElement("iframe"); 
    newFrame.id = originalFrame.getAttribute("id"); 
    newFrame.width = originalFrame.getAttribute("width"); 
    newFrame.height = originalFrame.getAttribute("height"); 
    newFrame.src = url;  
    var parent = originalFrame.parentNode; 
    parent.replaceChild(newFrame, originalFrame); 
} 

utilizar de esta manera:

setIFrameSrc("idframe", "test.html"); 

De esta manera no añadirá el URL de iframe al historial del navegador.

+1

Esto es útil. ¡Gracias! –

+1

Encantador, funciona muy bien en Chrome y Safari. – Amoss

11

Un método alternativo para volver a crear el iframe sería eliminar el iframe del DOM, cambiar el src y luego volver a agregarlo.

En muchos aspectos esto es similar a la sugerencia replace(), pero tuve algunos problemas cuando probé ese enfoque con History.js y gestioné estados manualmente.

var container = iframe.parent(); 

iframe.remove(); 
iframe.attr('src', 'about:blank'); 

container.append(iframe); 
+0

Me gusta mucho esto: resultó ser mucho más fácil que crear un nuevo iframe porque no necesita copiar todas las propiedades al nuevo iframe (id, size, style classes, ...) – Legolas

+0

GUARDADO. MI. VIDA. gracias a un millón ... – gcoladarci

7

Una solución es utilizar la etiqueta object en lugar de la etiqueta iframe.

Sustitución de esto:

<iframe src="http://yourpage"/> 

Por esto:

<object type="text/html" data="http://yourpage"/> 

le permitirá actualizar el atributo data sin afectar a la historia. Esto es útil si usa un marco declarativo como React.js donde no se supone que debe hacer ningún comando imperativo para actualizar el DOM.

Más detalles sobre las diferencias entre iframe y object: Use of Iframe or Object tag to embed web pages in another

+0

!!! La mejor respuesta !!! – xiefei

+0

Gran respuesta acordada @JBE Esto me ayudó muchísimo con Angular2 y no tener los cambios de disco iframe desencadenan actualizaciones de historial. –

+0

Esto no funciona para mí. Estoy en Chrome. Incluso destruir el iframe y reemplazarlo con un objeto sigue causando el maldito estado del historial del navegador (lo cual no tiene sentido porque el objeto destruido nunca recuperará su contenido). Grrrrrrrrr. – trusktr

0

la solución de carga más simple y rápida
Uso window.location.replace a no actualizar el historial cuando se carga la página o el marco.

Para los enlaces que se parece a esto:

<a href="#" onclick="YourTarget.location.replace ('http://www.YourPage.com');"> 
The targeted Link</a> 

o

<a href="javascript:YourTarget.location.replace ('http://www.YourPage.com');"> 
The targeted Link</a> 



Pero si quieres que no actuar de enlace, pero para actuar automáticamente al cargar el marco de Luego, desde el iframe, debe poner esto en la sección del cuerpo del archivo iframe:

onload="window.location.replace ('http://www.YourPage.com');" 


Si por alguna razón el proceso de carga no se carga en el iframe a continuación, poner el nombre del marco de destino en lugar de la ventana en la sintaxis como esta:

onload="YourTarget.location.replace ('http://www.YourPage.com');" 



NOTA : Para este script todos onclick, onmouseover, onmouseout, onload y href="javascript:" funcionará

0

Utilice el método replace para eludir la adición de la URL del marco flotante a la historia:

HTML:

<iframe id="myIframe" width="100%" height="400" src="#"></iframe> 

JavaScript:

var ifr = document.getElementById('mIframe') 
if (ifr) { 
    ifr.contentWindow.location.replace('http://www.blabla.com') 
}