javascript - recargar - reload page in iframe

¿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 establecer el atributo src de iframe en sí mismo, pero esto no está muy limpio. ¿Algunas ideas?

Answer 1

¿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 está consciente de que el parámetro es seguro, entonces debería estar bien.

Answer 2

Añadir espacio vacío también vuelve a cargar el iFrame automáticamente.

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

Answer 3

Acabo de enfrentarme a 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 se cubre en las otras respuestas.

Answer 4

Ahora para hacer 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 5

Debido a la misma política de origen , esto no funcionará al modificar un iframe que apunta a un dominio diferente. Si puede dirigirse 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 usar la funcionalidad HTML5, puede 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 de definir el problema.

Answer 6

El uso de 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();" />

Answer 7

En IE8 usando .Net, la configuración del iframe.src por primera vez está bien, pero la configuración del iframe.src por segunda vez no está aumentando la page_load de la página de la página iframed. Para resolverlo usé 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 se acaba de mostrar la página anterior que se abrió.

Answer 8

Otra solución.

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

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

Answer 9

Para propósitos 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()

Answer 10

Si probaste todas las otras sugerencias y no pudiste hacer que ninguna de ellas funcionara (como yo no podía), 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 un poco de tiempo con las pruebas de RWD y entre navegadores. Quería crear una página rápida que alojara un montón de iframes, organizados en grupos que mostraría / ocultaría a voluntad. Lógicamente, querría poder actualizar fácil y rápidamente cualquier marco dado.

Debo tener en cuenta que el proyecto en el que estoy trabajando actualmente, el que está en uso en este banco de pruebas, es un sitio de una página con ubicaciones indexadas (por ejemplo, index.html # home). Es posible que haya tenido algo que ver con el motivo por el que no pude obtener ninguna de las otras soluciones para actualizar 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 tan solo pudiera descubrir cómo evitar que el iframe se desplace por la página principal cada vez que haya una animación dentro de 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 sean compatibles con el contenidoWindow / contentDocument cuando iFrame carga un archivo html local del archivo html local? ) si no se origina en la misma ubicación (hasta donde lo entiendo). Después de más pruebas, tampoco puedo acceder a contentWindow en FF.

ENMENDADO JS

$(''.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 11

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, mientras que todas las soluciones getElemntById funcionan cuando intentas actualizar un marco desde otro marco.

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

Answer 12

Si usa jQuery, esto parece funcionar:

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

Espero que no sea demasiado feo para .

Answer 13

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

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

y si estas trabajando con el mismo padre entonces

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

Answer 14

Simplemente reemplazar el atributo src 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 quieres dar retroalimentación visual instantánea:

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

Answer 15

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 opinión de ppk de utilizar 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 Lo que crees que el navegador es capaz de hacer en ese momento. Además, no requiere un análisis de cadenas de ID de navegador tan feo, y no excluye navegadores perfectamente capaces de los que no se sabe nada.

Entonces, en lugar de mirar a navigator.AppName, ¿por qué no hacer algo como esto, en realidad probando los elementos que usa? (Podrías usar try {} blocks si quieres ser 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, puedes probar tantas permutaciones diferentes como desees 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, IMO, es 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 la función de recarga, pero eso es suficiente para mí ahora. :)

Answer 16

Use reload para IE y configure src para otros navegadores. (la recarga 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 17

para nueva url

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

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

recargar

location.reload();

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

Answer 18

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

Answer 19

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

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

Answer 20

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

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

Answer 21

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