Recargue un iframe con jQuery

Tengo dos iframes en una página y uno realiza cambios en el otro, pero el otro iframe no muestra el cambio hasta que me actualizo. ¿Hay una manera fácil de actualizar este iframe con jQuery?

<div class="project">
  <iframe id="currentElement" class="myframe" name="myframe" src="http://somesite.com/something/new"></iframe>
</div>

Si el iframe no estaba en un dominio diferente, podría hacer algo como esto:

document.getElementById(FrameID).contentDocument.location.reload(true);

Pero dado que el iframe está en un dominio diferente, se le negará el acceso al iframe contentDocument política del mismo origen propiedad .

Pero puede forzar hackear el iframe entre dominios para que se vuelva a cargar si su código se está ejecutando en la página principal del iframe, estableciendo su atributo src en sí mismo. Me gusta esto:

// hackishly force iframe to reload
var iframe = document.getElementById(FrameId);
iframe.src = iframe.src;

Si está intentando recargar el iframe desde otro iframe, no tiene suerte, eso no es posible.

$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });

También puedes usar jquery. Esto es lo mismo que Alex propuso simplemente usando JQuery:

 $('#currentElement').attr("src", $('#currentElement').attr("src"));

Recargue un iframe con jQuery

haga un enlace dentro del iframe, digamos con id = "reload" y luego use el siguiente código

$('#reload').click(function() {
    document.location.reload();
});

y eres bueno para ir con todos los navegadores.

Recargue un iframe con HTML (no se requiere Java Script)

Tiene una solución más simple: que funciona sin javaScript en (FF, Webkit)

solo haga un ancla dentro de su iframe

   <a href="#" target="_SELF">Refresh Comments</a>

Cuando haces clic en este ancla, simplemente actualiza tu iframe

Pero si tiene envío de parámetros a su iframe, hágalo de la siguiente manera.

  <a id="comnt-limit" href="?id=<?= $page_id?>" target="_SELF">Refresh Comments</a>

no necesita ninguna URL de la página porque -> target = "_ SELF" lo hace por usted

con jquery puedes usar esto:

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

Recíprocamente la respuesta de Alex pero con jQuery

var currSrc = $("#currentElement").attr("src");
$("#currentElement").attr("src", currSrc);

Aquí hay otra manera

$( '#iframe' ).attr( 'src', function () { return $( this )[0].src; } );

Estoy bastante seguro de que todos los ejemplos anteriores solo vuelven a cargar el iframe con su src original, no con su URL actual.

$('#frameId').attr('src', function () { return $(this).contents().get(0).location.href });

Eso debería recargar usando la url actual.

Si tiene un dominio cruzado, simplemente establecer el src nuevamente en la misma URL no siempre activará una recarga, incluso si cambia el hash de ubicación.

Encontré este problema al construir manualmente iframes de botones de Twitter, que no se actualizarían cuando actualizara las URL.

Los botones Me gusta de Twitter tienen la forma: .../tweet_button.html#&_version=2&count=none&etc=...

Como Twitter usa el fragmento de documento para la url, cambiar el hash / fragmento no volvió a cargar la fuente, y los objetivos de los botones no reflejaron mi nuevo contenido cargado de ajax.

Puede agregar un parámetro de cadena de consulta para forzar la recarga (por ejemplo: "?_=" + Math.random() pero eso desperdiciará el ancho de banda, especialmente en este ejemplo donde el enfoque de Twitter estaba tratando específicamente de habilitar el almacenamiento en caché.

Para volver a cargar algo que solo cambia con etiquetas hash, debe eliminar el elemento o cambiarlo src, esperar a que salga el hilo y luego asignarlo de nuevo. Si la página todavía está en caché, esto no debería requerir una visita a la red, pero sí activa la recarga del marco.

 var old = iframe.src;
 iframe.src = '';
 setTimeout( function () {
    iframe.src = old;
 }, 0);

Actualización : el uso de este enfoque crea elementos de historial no deseados. En su lugar, elimine y vuelva a crear el elemento iframe cada vez, lo que mantiene este botón de retroceso () funcionando como se esperaba. También es bueno no tener el temporizador.

Solo correspondiendo la respuesta de Alex pero con jQuery:

var e = $('#myFrame');
    e.attr("src", e.attr("src"));

O puede usar una función pequeña:

function iframeRefresh(e) {
    var c = $(e);
        c.attr("src", c.attr("src"));
}

Espero que ayude.

$('IFRAME#currentElement').get(0).contentDocument.location.reload()

Esto es posible con JavaScript simple.

• En iFrame1, realice una función de JavaScript que se llama en la etiqueta de carga del cuerpo. Tengo que verifique una variable del lado del servidor que configuré, por lo que no intenta ejecutar la función de JavaScript en iframe2 a menos que haya tomado una acción específica en iframe1. Puede configurar esto como una función activada presionando un botón o como desee en iframe1.
• Luego, en iframe2, tiene la segunda función que enumero a continuación. La función en iframe1 básicamente va a la página principal y luego usa la window.framessintaxis para activar una función de JavaScript en iframe2. Solo asegúrese de usar el id/ namede iframe2 y no el src.

//function in iframe1
function refreshIframe2()
{
    if (<cfoutput>#didValidation#</cfoutput> == 1)
    {   
         parent.window.frames.iframe2.refreshPage();
    }
}

//function in iframe2
function refreshPage()
{   
    document.location.reload();
}

// actualiza todos los iframes en la página

var f_list = document.getElementsByTagName('iframe');

 for (var i = 0, f; f = f_list[i]; i++) {
                            f.src = f.src;
                        }

    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

La solución de navegador cruzado es:

    ifrX.src = ifrX.contentWindow.location

Esto es útil especialmente cuando <iframe> es el objetivo de un <form>

¡RESUELTO! ¡Me registro en stockoverflow solo para compartir con ustedes la única solución (al menos en ASP.NET/IE/FF/Chrome) que funciona! La idea es reemplazar el valor innerHTML de un div por su valor innerHTML actual.

Aquí está el fragmento de HTML:

<div class="content-2" id="divGranite">
<h2>Granite Purchase</h2>
<IFRAME  runat="server" id="frameGranite" src="Jobs-granite.aspx" width="820px" height="300px" frameborder="0" seamless  ></IFRAME>
</div>

Y mi código Javascript:

function refreshGranite() {           
   var iframe = document.getElementById('divGranite')
   iframe.innerHTML = iframe.innerHTML;
}

Espero que esto ayude.

Necesitas usar

[0] .src

para encontrar la fuente del iframe y su URL debe estar en el mismo dominio del padre.

setInterval(refreshMe, 5000);
function refreshMe() {
    $("#currentElement")[0].src = $("#currentElement")[0].src;   
}

puedes hacerlo asi

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });

La siguiente solución funcionará con seguridad:

window.parent.location.href = window.parent.location.href;