¿Cuál es la mejor manera de recargar / actualizar un iframe?

Me gustaría volver a cargar un <iframe>usando JavaScript. La mejor manera que encontré hasta ahora fue establecer el srcatributo del iframe para sí mismo, pero esto no es muy limpio. ¿Algunas ideas?

document.getElementById('some_frame_id').contentWindow.location.reload();

tenga cuidado, en Firefox, window.frames[]no se puede indexar por id, sino por nombre o índice

document.getElementById('iframeid').src = document.getElementById('iframeid').src

¡Recargará el iframe, incluso a través de dominios! Probado con IE7 / 8, Firefox y Chrome.

Si usa jQuery, esto parece funcionar:

$('#your_iframe').attr('src', $('#your_iframe').attr('src'));

Espero que no sea demasiado feo para stackoverflow.

Agregar espacio vacío también recarga el iFrame automáticamente.

document.getElementById('id').src += '';

window.frames['frameNameOrIndex'].location.reload();

Debido a la misma política de origen , esto no funcionará al modificar un iframe que apunta a un dominio diferente. Si puede apuntar a navegadores más nuevos, considere usar la mensajería de documentos cruzados de HTML5 . Puede ver los navegadores que admiten esta función aquí: http://caniuse.com/#feat=x-doc-messaging .

Si no puede utilizar la funcionalidad HTML5, puede seguir los trucos descritos aquí: http://softwareas.com/cross-domain-communication-with-iframes . Esa entrada de blog también hace un buen trabajo al definir el problema.

Acabo de encontrarme con esto en Chrome y lo único que funcionó fue eliminar y reemplazar el iframe. Ejemplo:

$(".iframe_wrapper").find("iframe").remove();
var iframe = $('<iframe src="' + src + '" frameborder="0"></iframe>');
$.find(".iframe_wrapper").append(iframe);

Bastante simple, no cubierto en las otras respuestas.

para nueva url

location.assign("http:google.com");

El método asignar () carga un nuevo documento.

recargar

location.reload();

El método reload () se usa para recargar el documento actual.

Simplemente reemplazar el srcatributo del elemento iframe no fue satisfactorio en mi caso porque uno vería el contenido anterior hasta que se cargue la nueva página. Esto funciona mejor si desea dar retroalimentación visual instantánea:

var url = iframeEl.src;
iframeEl.src = 'about:blank';
setTimeout(function() {
    iframeEl.src = url;
}, 10);

Un refinamiento en la publicación de yajra ... Me gusta la idea, pero odio la idea de la detección del navegador.

Prefiero la opinión de ppk de usar la detección de objetos en lugar de la detección del navegador ( http://www.quirksmode.org/js/support.html ), porque en realidad estás probando las capacidades del navegador y actuando en consecuencia, en lugar de de lo que crees que es capaz el navegador en ese momento. Tampoco requiere tanto análisis de cadenas de ID de navegador feo y no excluye navegadores perfectamente capaces de los que no se sabe nada.

Entonces, en lugar de mirar navigator.AppName, ¿por qué no hacer algo como esto, en realidad probar los elementos que usa? (Puedes usar los bloques try {} si quieres ponerte aún más elegante, pero esto funcionó para mí).

function reload_message_frame() {
    var frame_id = 'live_message_frame';
    if(window.document.getElementById(frame_id).location ) {  
        window.document.getElementById(frame_id).location.reload(true);
    } else if (window.document.getElementById(frame_id).contentWindow.location ) {
        window.document.getElementById(frame_id).contentWindow.location.reload(true);
    } else if (window.document.getElementById(frame_id).src){
        window.document.getElementById(frame_id).src = window.document.getElementById(frame_id).src;
    } else {
        // fail condition, respond as appropriate, or do nothing
        alert("Sorry, unable to reload that frame!");
    }
}

De esta manera, puede probar tantas permutaciones diferentes como desee o sea necesario, sin causar errores de JavaScript, y hacer algo sensato si todo lo demás falla. Es un poco más de trabajo probar sus objetos antes de usarlos, pero, en mi opinión, hace un código mejor y más seguro.

Me funcionó en IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m) y Opera (12.0.2) en Windows.

Tal vez podría hacerlo aún mejor probando realmente la función de recarga, pero eso es suficiente para mí en este momento. :)

Ahora para que esto funcione en Chrome 66, intente esto:

const reloadIframe = (iframeId) => {
    const el = document.getElementById(iframeId)
    const src = el.src
    el.src = ''
    setTimeout(() => {
        el.src = src
    })
}

En IE8 usando .Net, configurar iframe.srcpor primera vez está bien, pero configurarlo iframe.srcpor segunda vez no aumenta la page_loadpágina de iframed. Para resolverlo yo solía iframe.contentDocument.location.href = "NewUrl.htm".

Descúbralo cuando use jQuery thickBox e intente volver a abrir la misma página en el iframe de thickbox. Luego, solo mostró la página anterior que se abrió.

Use reload para IE y configure src para otros navegadores. (recargar no funciona en FF) probado en IE 7,8,9 y Firefox

if(navigator.appName == "Microsoft Internet Explorer"){
    window.document.getElementById('iframeId').contentWindow.location.reload(true);
}else {
    window.document.getElementById('iframeId').src = window.document.getElementById('iframeId').src;
}

Si usa Jquery, entonces hay un código de línea.

$('#iframeID',window.parent.document).attr('src',$('#iframeID',window.parent.document).attr('src'));

y si estás trabajando con el mismo padre

$('#iframeID',parent.document).attr('src',$('#iframeID',parent.document).attr('src'));

Si todo lo anterior no funciona para usted:

window.location.reload();

Esto, por alguna razón, actualizó mi iframe en lugar de todo el script. ¿Tal vez porque se coloca en el marco en sí, mientras que todas esas soluciones getElemntById funcionan cuando intenta actualizar un marco desde otro marco?

O no entiendo esto completamente y hablo galimatías, de todos modos esto funcionó para mí como un encanto :)

¿Ha considerado agregar a la url un parámetro de cadena de consulta sin sentido?

<iframe src="myBaseURL.com/something/" />

<script>
var i = document.getElementsById("iframe")[0],
    src = i.src,
    number = 1;

//For an update
i.src = src + "?ignoreMe=" + number;
number++;
</script>

No se verá y si sabe que el parámetro es seguro, entonces debería estar bien.

Otra solución.

const frame = document.getElementById("my-iframe");

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

El uso self.location.reload()volverá a cargar el iframe.

<iframe src="https://vivekkumar11432.wordpress.com/" width="300" height="300"></iframe>
<br><br>
<input type='button' value="Reload"  onclick="self.location.reload();" />

<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script> 

Si probaste todas las otras sugerencias y no pudiste hacer que ninguna de ellas funcionara (como yo no pude), aquí hay algo que puedes probar que puede ser útil.

HTML

<a class="refresh-this-frame" rel="#iframe-id-0">Refresh</a>
<iframe src="" id="iframe-id-0"></iframe>

JS

$('.refresh-this-frame').click(function() {
    var thisIframe = $(this).attr('rel');
    var currentState = $(thisIframe).attr('src');
    function removeSrc() {
        $(thisIframe).attr('src', '');
    }
    setTimeout (removeSrc, 100);
    function replaceSrc() {
        $(thisIframe).attr('src', currentState);
    }
    setTimeout (replaceSrc, 200);
});

Inicialmente me propuse intentar ahorrar algo de tiempo con RWD y pruebas de navegador cruzado. Quería crear una página rápida que albergara un montón de iframes, organizados en grupos que mostraría / ocultaría a voluntad. Lógicamente, desearía poder actualizar fácil y rápidamente cualquier marco dado.

Debo señalar que el proyecto en el que estoy trabajando actualmente, el que se usa en este banco de pruebas, es un sitio de una página con ubicaciones indexadas (por ejemplo, index.html # home). Eso puede haber tenido algo que ver con por qué no pude obtener ninguna de las otras soluciones para actualizar mi marco particular.

Dicho esto, sé que no es la cosa más limpia del mundo, pero funciona para mis propósitos. Espero que esto ayude a alguien. Ahora, si solo pudiera descubrir cómo evitar que el iframe se desplace por la página principal cada vez que hay animación dentro del iframe ...

EDITAR: Me di cuenta de que esto no "actualiza" el iframe como esperaba. Sin embargo, volverá a cargar la fuente inicial del iframe. Todavía no puedo entender por qué no pude hacer funcionar ninguna de las otras opciones ...

ACTUALIZACIÓN: La razón por la que no pude hacer funcionar ninguno de los otros métodos es porque los estaba probando en Chrome, y Chrome no le permitirá acceder al contenido de un iframe (Explicación: ¿Es probable que las futuras versiones de Chrome admitan contentWindow? / contentDocument cuando iFrame carga un archivo html local desde un archivo html local? ) si no se origina en la misma ubicación (por lo que yo entiendo). Luego de más pruebas, tampoco puedo acceder a contentWindow en FF.

JS MODIFICADO

$('.refresh-this-frame').click(function() {
    var targetID = $(this).attr('rel');
    var targetSrc = $(targetID).attr('src');
    var cleanID = targetID.replace("#","");     
    var chromeTest = ( navigator.userAgent.match(/Chrome/g) ? true : false );
    var FFTest = ( navigator.userAgent.match(/Firefox/g) ? true : false );      
    if (chromeTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }
    if (FFTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }       
    if (chromeTest == false && FFTest == false) {
        var targetLoc = (document.getElementById(cleanID).contentWindow.location).toString();
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc2() {
            $(targetID).attr('src', targetLoc);
        }
        setTimeout (replaceSrc2, 200);
    }
});

Para fines de depuración, uno podría abrir la consola, cambiar el contexto de ejecución al marco que desea actualizar y hacer document.location.reload()