Qual é a melhor maneira de recarregar / atualizar um iframe?

Gostaria de recarregar um <iframe>usando JavaScript. A melhor maneira que encontrei até agora foi definir o srcatributo do iframe , mas isso não é muito limpo. Alguma ideia?

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

tenha cuidado, no Firefox, window.frames[]não pode ser indexado por ID, mas por nome ou índice

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

Ele recarregará iframe, mesmo entre domínios! Testado com IE7 / 8, Firefox e Chrome.

Se você estiver usando jQuery, isso parece funcionar:

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

Espero que não seja muito feio para o stackoverflow.

Adicionar espaço vazio também recarrega o iFrame automaticamente.

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

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

Por causa da mesma política de origem , isso não funcionará ao modificar um iframe apontando para um domínio diferente. Se você pode direcionar navegadores mais novos, considere usar as mensagens entre documentos do HTML5 . Você visualiza os navegadores que suportam esse recurso aqui: http://caniuse.com/#feat=x-doc-messaging .

Se você não pode usar a funcionalidade HTML5, siga os truques descritos aqui: http://softwareas.com/cross-domain-communication-with-iframes . Essa entrada do blog também faz um bom trabalho ao definir o problema.

Acabei de me deparar com isso no chrome e a única coisa que funcionou foi remover e substituir o iframe. Exemplo:

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

Muito simples, não abordado nas outras respostas.

para novo URL

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

O método assign () carrega um novo documento.

recarregar

location.reload();

O método reload () é usado para recarregar o documento atual.

Simplesmente substituir o srcatributo do elemento iframe não era satisfatório no meu caso, porque seria possível ver o conteúdo antigo até a nova página ser carregada. Isso funciona melhor se você deseja fornecer feedback visual instantâneo:

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

Um refinamento na postagem de yajra ... Eu gosto do pensamento, mas odeio a idéia de detecção de navegador.

Eu prefiro a visão do ppk de usar a detecção de objetos em vez da detecção do navegador ( http://www.quirksmode.org/js/support.html ), porque você está realmente testando os recursos do navegador e agindo de acordo, em vez de do que você acha que o navegador é capaz naquele momento. Também não requer tanta análise feia de IDs de navegador, nem exclui navegadores perfeitamente capazes dos quais você não conhece nada.

Então, em vez de olhar para navigator.AppName, por que não fazer algo assim, testando os elementos que você usa? (Você pode usar os blocos try {} se quiser ficar ainda mais elegante, mas isso funcionou para mim.)

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!");
    }
}

Dessa forma, você pode tentar quantas permutações diferentes quiser ou sem precisar causar erros de javascript e fazer algo sensato se tudo mais falhar. É um pouco mais trabalhoso testar seus objetos antes de usá-los, mas, o IMO cria códigos melhores e mais seguros.

Trabalhei para mim no IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m) e Opera (12.0.2) no Windows.

Talvez eu pudesse me sair ainda melhor testando a função recarregar, mas isso é o suficiente para mim agora. :)

Agora, para fazer isso funcionar no chrome 66, tente o seguinte:

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

No IE8, usando .Net, definir iframe.srcpela primeira vez é aceitável, mas definir iframe.srcpela segunda vez não aumenta a page_loadpágina iframed. Para resolvê-lo eu usei iframe.contentDocument.location.href = "NewUrl.htm".

Descubra-o quando usado o jQuery thickBox e tente reabrir a mesma página no iframe do thickbox. Em seguida, apenas mostrou a página anterior que foi aberta.

Use recarregar para o IE e defina src para outros navegadores. (recarregar não funciona no FF) testado no IE 7,8,9 e 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;
}

Se você estiver usando o Jquery, haverá um código de linha.

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

e se você estiver trabalhando com o mesmo pai, então

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

Se todas as opções acima não funcionarem para você:

window.location.reload();

Por algum motivo, isso atualizou meu iframe em vez de todo o script. Talvez porque seja colocado no próprio quadro, enquanto todas as soluções getElemntById funcionam quando você tenta atualizar um quadro de outro quadro?

Ou eu não entendo isso completamente e falo sem sentido, de qualquer maneira isso funcionou para mim como um encanto :)

Você considerou anexar ao URL um parâmetro de string de consulta sem 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>

Ele não será visto e, se você souber que o parâmetro é seguro, deve estar correto.

Outra solução.

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

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

Usar self.location.reload()recarregará o 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> 

Se você tentou todas as outras sugestões e não conseguiu que nenhuma delas funcionasse (como eu não consegui), aqui está algo que você pode tentar que pode 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, decidi tentar economizar algum tempo com o RWD e os testes entre navegadores. Eu queria criar uma página rápida que abrigasse um monte de iframes, organizados em grupos que eu mostraria / ocultaria à vontade. Logicamente, você deseja atualizar com facilidade e rapidez qualquer quadro.

Devo observar que o projeto no qual estou trabalhando atualmente, aquele em uso neste banco de ensaios, é um site de uma página com locais indexados (por exemplo, index.html # home). Isso pode ter algo a ver com o motivo pelo qual não consegui obter nenhuma das outras soluções para atualizar meu quadro específico.

Dito isto, sei que não é a coisa mais limpa do mundo, mas funciona para meus propósitos. Espero que isso ajude alguém. Agora, se eu conseguisse descobrir como impedir o iframe de rolar a página pai toda vez que houver animação dentro do iframe ...

Edição: percebi que isso não "atualiza" o iframe como eu esperava que fosse. Ele recarregará a fonte inicial do iframe. Ainda não consigo descobrir por que não consegui fazer funcionar nenhuma das outras opções.

ATUALIZAÇÃO: O motivo pelo qual não consegui usar nenhum dos outros métodos funcionou é porque os estava testando no Chrome, e o Chrome não permitirá que você acesse o conteúdo de um iframe (Explicação: É provável que versões futuras do Chrome suportem o conteúdo / contentDocument quando o iFrame carrega um arquivo html local a partir do arquivo html local? ) se ele não se originar do mesmo local (até onde eu entendi). Após testes adicionais, também não consigo acessar o contentWindow no FF.

JS ALTERADO

$('.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 fins de depuração, é possível abrir o console, alterar o contexto de execução para o quadro que ele deseja atualizar e executar document.location.reload()