Recargue un IFRAME sin agregar nada al historial

StackOverflow https://stackoverflow.com/questions/821359

  •  03-07-2019
  •  | 
  •  

Pregunta

Estoy cambiando el src de un IFRAME para recargarlo, funciona bien y dispara el evento onload cuando se carga su HTML.

Pero agrega una entrada a la historia, que no quiero. ¿Hay alguna forma de volver a cargar un IFRAME y, sin embargo, no afectar el historial?

¿Fue útil?

Solución

Puede usar javascript location.replace : 

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

Reemplace el documento actual con el   uno en la URL proporcionada. los   diferencia del método assign () es   que después de usar reemplazar () el actual   la página no se guardará en la sesión   historia, lo que significa que el usuario no será   capaz de usar el botón Atrás para   navega hasta ella.

Otros consejos

El uso de replace () es solo una opción con tus propios iframes de dominio. No funciona en sitios remotos (por ejemplo, un botón de twitter) y requiere algún conocimiento específico del navegador 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 modificas el atributo src después de que está en el DOM, así que asegúrate de establecerlo antes del anexo.

Editar: JDandChips menciona correctamente que puede eliminar de DOM, modificar y volver a agregar. No se requiere la construcción de nuevos.

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

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

* Acabo de saber que necesito más reputación para comentar una respuesta.

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

En muchos aspectos, esto es similar a la sugerencia de replace () , pero tuve algunos problemas cuando intenté ese enfoque con History.js y los estados de administración manualmente. 

var container = iframe.parent();

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

container.append(iframe);

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

Reemplazando esto: 

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

Por esto: 

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

le permitirá actualizar el atributo data sin afectar el historial. Esto es útil si usa un marco declarativo como React.js donde no debe hacer ningún comando obligatorio para actualizar el DOM.

Más detalles sobre las diferencias entre iframe y objeto : Uso de Iframe o Object tag para incrustar páginas web en otra

Intente usar esta función para reemplazar el iframe antiguo con el iframe nuevo que se copia del anterior: 

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);
}

Úsalo así: 

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

De esta manera no agregará la URL de iframe al historial del navegador.

Utilice el método replace para omitir la adición de la URL del iframe al historial:

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')
}

La solución de carga más simple y rápida
Utilice window.location.replace para no actualizar el historial al cargar la página o el marco.

Para enlaces se ve así: 

<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 no quiere que actúe desde el enlace, sino que actúe automáticamente al cargar el marco, a continuación, desde el iframe debe poner esto en la sección del cuerpo del archivo del iframe: 

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


Si, por algún motivo, la carga no se carga en el iframe, coloque el nombre del marco de destino en lugar de la ventana en la sintaxis de esta manera: 

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



NOTA: Para este script, todos onclick , onmouseover , onmouseout , onload y < El código> href = " javascript: " funcionará.

La respuesta de JDandChips me funcionó en un iframe de origen cruzado (youtube), aquí está en JS (sin JQuery) de vainilla: 

const container = iframe.parentElement;

container.removeChild(iframe);

iframe.setAttribute('src', 'about:blank');

container.appendChild(iframe);
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top