Recarregar um iframe com jQuery

Eu tenho dois iframes em uma página e um faz alterações na outra, mas o outro iframe não mostra a alteração até que eu atualize. Existe uma maneira fácil de atualizar esse iframe com o jQuery?

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

Se o iframe não estivesse em um domínio diferente, você poderia fazer algo assim:

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

Mas como o iframe está em um domínio diferente, você terá acesso negado à contentDocumentpropriedade do iframe pela política de mesma origem .

Mas você pode forçar hackishly o iframe entre domínios a recarregar se seu código estiver sendo executado na página pai do iframe, definindo seu atributo src para si mesmo. Como isso:

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

Se você está tentando recarregar o iframe de outro iframe, está sem sorte, isso não é possível.

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

você também pode usar o jquery. É o mesmo que Alex propôs usando o JQuery:

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

Recarregar um iframe com jQuery

faça um link dentro do iframe, digamos com id = "reload" e use o código a seguir

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

e você está pronto para usar todos os navegadores.

Recarregue um iframe com HTML (sem necessidade de Java Script)

Possui uma solução mais simples: que funciona sem javaScript (FF, Webkit)

basta fazer uma âncora no lado do seu iframe

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

Quando você clica nessa âncora, apenas atualiza seu iframe

Mas se você tiver um parâmetro enviado para o seu iframe, faça o seguinte.

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

não precisa de nenhum URL de página porque -> target = "_ SELF" faz isso por você

com jquery você pode usar isto:

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

Apenas retribuindo a resposta de Alex, mas com o jQuery

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

Aqui está outra maneira

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

Tenho certeza de que todos os exemplos acima apenas recarregam o iframe com seu src original, não com o URL atual.

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

Isso deve ser recarregado usando o URL atual.

Se você for de domínio cruzado, simplesmente definir o src de volta para o mesmo URL nem sempre acionará uma recarga, mesmo que o hash do local seja alterado.

Deparei com esse problema ao criar manualmente iframes de botão do Twitter, que não eram atualizados quando eu atualizava os URLs.

Os botões do tipo Twitter têm a forma: .../tweet_button.html#&_version=2&count=none&etc=...

Como o Twitter usa o fragmento de documento para o URL, a alteração do hash / fragmento não recarregou a fonte e os destinos do botão não refletiram meu novo conteúdo carregado com ajax.

Você pode anexar um parâmetro de string de consulta para forçar o recarregamento (por exemplo: "?_=" + Math.random() mas isso desperdiçará largura de banda, especialmente neste exemplo em que a abordagem do Twitter estava especificamente tentando ativar o cache.

Para recarregar algo que muda apenas com tags de hash, é necessário remover o elemento ou alterá-lo src, aguarde a saída do encadeamento e atribua-o novamente. Se a página ainda estiver em cache, isso não exigirá uma ocorrência na rede, mas acionará o recarregamento de quadros.

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

Atualização : o uso dessa abordagem cria itens de histórico indesejados. Em vez disso, remova e recrie o elemento iframe toda vez, o que mantém esse botão voltar () funcionando conforme o esperado. Também é bom não ter o cronômetro.

Apenas respondendo a resposta de Alex, mas com o jQuery:

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

Ou você pode usar uma função pequena:

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

Espero que ajude.

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

Isso é possível com JavaScript simples.

• No iFrame1, crie uma função JavaScript que é chamada na tag body body onload. Eu tenho que verificar uma variável do lado do servidor que eu defino, para que não tente executar a função JavaScript no iframe2, a menos que eu tenha tomado uma ação específica no iframe1. Você pode configurá-lo como uma função acionada por pressionar um botão ou como desejar no iframe1.
• Então, no iframe2, você tem a segunda função que listo abaixo. A função no iframe1 basicamente vai para a página pai e, em seguida, usa a window.framessintaxe para disparar uma função JavaScript no iframe2. Apenas certifique-se de usar o id/ namedo iframe2 e não o src.

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

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

// atualiza todos os iframes na 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'];

A solução entre navegadores é:

    ifrX.src = ifrX.contentWindow.location

isso é útil especialmente quando <iframe> é o destino de um <form>

RESOLVIDO! Registro-me no stockoverflow apenas para compartilhar com você a única solução (pelo menos no ASP.NET/IE/FF/Chrome) que funciona! A idéia é substituir o valor innerHTML de uma div pelo seu atual valor innerHTML.

Aqui está o trecho 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>

E meu código Javascript:

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

Espero que isto ajude.

Você precisa usar

[0] .src

para encontrar a origem do iframe e seu URL precisa estar no mesmo domínio do pai.

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

você pode fazer assim

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

A solução abaixo funcionará com certeza:

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