¿Cómo actualizar un IFrame usando Javascript?


Respuestas:


152
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;

2
Me funciona en esta versión de Chrome:Version 24.0.1312.56 Ubuntu 12.04 (24.0.1312.56-0ubuntu0.12.04.1)
Paul A Jungwirth

3
Para su información: actualmente (a partir de enero de 2013) hay un error en el proyecto Chromium ( code.google.com/p/chromium/issues/detail?id=172859 ) que hace que las actualizaciones de iframe se agreguen al historial del documento.
Robert Altman

Si en iFrame cambia la página, este método pierde la navegación
Eduardo Cuomo

10
var tmp_src = iframe.src; iframe.src = ''; iframe.src = tmp_src;
lyfing

2
esto funciona perfectamente para mí en cromodocument.getElementById('frame_id').contentDocument.location.reload(true);
Haseeb Zulfiqar

104

Esto debería ayudar:

document.getElementById('FrameID').contentWindow.location.reload(true);

EDITAR: Se corrigió el nombre del objeto según el comentario de @ Joro.


3
Esto no funciona en IE9. Debería utilizar contentWindow en lugar de contentDocument.
gotqn

1
Gracias por la respuesta. Además, si tiene que hacer una actualización positivamente a otra página a otra dentro del marco flotante entonces en lugar de reload(true)que utilizaría la siguiente:document.getElementById('FrameID').contentWindow.location.replace(new_url);
racl101

15
Esto no funciona con iframes con diferentes orígenes (protocolo, nombre de host o puerto).
michelpm

18

siempre que el iframe se cargue desde el mismo dominio, puede hacer esto, lo que tiene un poco más de sentido:

iframe.contentWindow.location.reload();

7

Funciona para IE, Mozzila, Chrome

document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);

4

Puedes usar este método simple

function reloadFrame(iFrame) {

    iFrame.parentNode.replaceChild(iFrame.cloneNode(), iFrame);

}

2

Tengo esto de aqui

var f = document.getElementById('iframe1');
f.src = f.src;

Si en iFrame cambia la página, este método pierde la navegación
Eduardo Cuomo

2

2017:

Si está en el mismo dominio, simplemente:

iframe.contentWindow.location.reload();

trabajará.


1

Aquí está el fragmento de HTML:

<td><iframe name="idFrame" id="idFrame" src="chat.txt" width="468" height="300"></iframe></td>

Y mi código Javascript:

window.onload = function(){
setInterval(function(){
    parent.frames['idFrame'].location.href = "chat.txt";
},1000);}

1

Restableciendo el atributo src directamente:

iframe.src = iframe.src;

Restableciendo el src con una marca de tiempo para la prevención de caché:

iframe.src =  iframe.src.split("?")[0] + "?_=" + new Date().getTime();

Borrar el src cuando la opción de cadenas de consulta no es posible (URI de datos):

var wasSrc = iframe.src

iframe.onload = function() {
    iframe.onload = undefined;
    iframe.src = wasSrc;
}

1

Si usa rutas hash (como mywebsite.com/#/my/url) que podrían no actualizar los marcos al cambiar el hash:

<script>
    window.onhashchange = function () {
        window.setTimeout(function () {
            let frame = document.getElementById('myFrame');
            if (frame !== null) {frame.replaceWith(frame);}
        }, 1000);
    }
</script>

Desafortunadamente, si no usa el tiempo de espera, JS puede intentar reemplazar el marco antes de que la página haya terminado de cargar el contenido (cargando así el contenido antiguo). Todavía no estoy seguro de la solución.


0

Si tiene varios iFrames dentro de la página, este script puede resultarle útil. Supongo que hay un valor específico en la fuente de iFrame que se puede usar para encontrar el iFrame específico.

var iframes = document.getElementsByTagName('iframe');
var yourIframe = null
for(var i=0; i < iframes.length ;i++){
    var source =  iframes[i].attributes.src.nodeValue;
    if(source.indexOf('/yourSorce') > -1){
        yourIframe = iframes[i];
    }   
}
var iSource = yourIframe.attributes.src.nodeValue;
yourIframe.src = iSource;

Reemplace "/ yourSource" con el valor que necesita.


0

Si la URL de su iframe no cambia, puede simplemente volver a crearla.

Si su iframe no es del mismo origen (esquema de protocolo, nombre de host y puerto), no podrá conocer la URL actual en el iframe, por lo que necesitará un script en el documento iframe para intercambiar mensajes con su ventana principal ( la ventana de la página).

En el documento iframe:

window.addEventListener('change', function(e) {
  if (e.data === 'Please reload yourself') {
    var skipCache = true; // true === Shift+F5
    window.location.reload(skipCache);
  }
}

En tu pagina:

var iframe = document.getElementById('my-iframe');
var targetOrigin = iframe.src; // Use '*' if you don't care
iframe.postMessage('Please reload yourself', targetOrigin);

-2

Puedes usar esto:

Js:

function refreshFrame(){
    $('#myFrame').attr('src', "http://blablab.com?v=");
}

HTML:

`<iframe id="myFrame" src=""></iframe>`

JS Fiddle: https://jsfiddle.net/wpb20vzx/


1
La pregunta no tiene nada que ver con la popular biblioteca de JavaScript llamada jQuery.
John Weisz

¿Qué haría Math.round ()? Parece totalmente inútil aquí.
Davide R.

Hola, utilicé Math.round () porque algunos navegadores pueden almacenar en caché la URL, por lo que la actualización no funciona.
Ferhat KOÇER
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.