¿Cómo actualizar un IFrame usando Javascript?

Respuestas:

152
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;
kjagiello
fuente
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.

nfechner
fuente
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();
Horia Dragomir
fuente
7

Funciona para IE, Mozzila, Chrome

document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);
Marek Pavelek
fuente
4

Puedes usar este método simple

function reloadFrame(iFrame) {

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

}
Vasile Alexandru Peste
fuente
2

Tengo esto de aqui

var f = document.getElementById('iframe1');
f.src = f.src;
Amarghosh
fuente
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á.

pery mimon
fuente
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);}
Tony
fuente
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;
}
lcharbon
fuente
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.

NotoriousPyro
fuente
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.

sarvesh singh
fuente
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);
michelpm
fuente
-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/

Ferhat KOÇER
fuente
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