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

Question

Me gustaría recargar un <iframe> utilizando JavaScript.La mejor manera que encontré hasta ahora fue configurar el iframe src atribuirse a sí mismo, pero esto no es muy claro.¿Algunas ideas?

Answer 1

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

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

Answer 2

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

Se recargará el iframe, ¡Incluso entre dominios!Probado con IE7/8, Firefox y Chrome.

Answer 3

Si usa jQuery, esto parece funcionar:

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

Espero que no sea demasiado feo para stackoverflow.

Answer 4

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

Answer 5

Agregue espacio vacío y recargue el iFrame automáticamente.

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

Answer 6

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

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

Answer 7

Me acabo de encontrar con esto en Chrome y lo único que funcionó fue quitar 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.

Answer 8

para nueva URL

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

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

recargar

location.reload();

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

Answer 9

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

Prefiero tomar la visió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 entonces en realidad estás probando las capacidades del navegador y actuando en consecuencia, en lugar de lo que crees que el navegador es capaz en ese momento.Además, no requiere tanto análisis feo de cadenas de ID del navegador y no excluye navegadores perfectamente capaces de los que no sabes nada.

Entonces, en lugar de mirar navigator.AppName, ¿por qué no hacer algo como esto y probar los elementos que usa?(Podrías usar los bloques try {} si quieres ser aún más sofisticado, 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, puedes probar tantas permutaciones diferentes como quieras 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, crea un código mejor y más seguro.

Funcionó para mí 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 la función de recarga, pero eso es suficiente para mí en este momento.:)

Answer 10

Simplemente reemplazando el src El atributo del elemento iframe no fue satisfactorio en mi caso porque se vería el contenido anterior hasta que se cargara la nueva página.Esto funciona mejor si desea brindar información visual instantánea:

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

Answer 11

En IE8 usando .Net, configurando el iframe.src por primera vez está bien, pero establecer el iframe.src por segunda vez no está subiendo el page_load de la página iframed.Para resolverlo utilicé iframe.contentDocument.location.href = "NewUrl.htm".

Descúbrelo cuando usaste jQuery ThickBox e intenté volver a abrir la misma página en el iframe de Thickbox.Luego simplemente mostró la página anterior que se abrió.

Answer 12

Utilice recargar 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;
}

Answer 13

¿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.

Answer 14

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

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

y si estás trabajando con el mismo padre entonces

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

Answer 15

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

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

Answer 16

Si todo lo anterior no funciona para usted:

window.location.reload();

Por alguna razón, esto actualizó mi iframe en lugar de todo el script.¿Quizás porque se coloca en el marco mismo, mientras que todas esas soluciones getElemntById funcionan cuando intentas actualizar un marco desde otro marco?

O no entiendo esto completamente y hablo tonterías, de todos modos esto funcionó de maravilla para mí :)

Answer 17

Usando self.location.reload() recargará el iframe.

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

Answer 18

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

Answer 19

Si probó todas las otras sugerencias y no pudo hacer que ninguna funcionara (como yo no pude), aquí hay algo que puede probar y que puede resultarle ú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 en varios navegadores.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 querrás poder actualizar fácil y rápidamente cualquier fotograma determinado.

Debo señalar que el proyecto en el que estoy trabajando actualmente, el que se utiliza en este banco de pruebas, es un sitio de una página con ubicaciones indexadas (p. ej.index.html#inicio).Es posible que eso haya tenido algo que ver con el motivo por el cual no pude conseguir que ninguna de las otras soluciones actualizara mi marco en particular.

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

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

ACTUALIZAR: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 te permitirá acceder al contenido de un iframe (Explicación: ¿Es probable que las versiones futuras 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 (hasta donde yo lo entiendo).Tras realizar más pruebas, tampoco puedo acceder a contentWindow en FF.

JS ENMENDADO

$('.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);
    }
});

Answer 20

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

Answer 21

Otra solución.

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

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