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

Question

Gostaria de recarregar uma <iframe> usando JavaScript. A melhor maneira que eu encontrei até agora foi definido atributo src do iframe para si mesmo, mas isso não é muito limpo. Alguma idéia?

Answer 1

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

ter cuidado, no Firefox, window.frames[] não podem ser indexados por id, mas pelo nome ou índice

Answer 2

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

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

Answer 3

Se estiver usando jQuery, isso parece funcionar:

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

Eu espero que não seja muito feio para stackoverflow.

Answer 4

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

Answer 5

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

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

Answer 6

Por causa da mesma origem política , isso não vai trabalho quando modificar um apontador iframe para um domínio diferente. Se você pode direcionar os navegadores mais recentes, considere o uso do HTML5 Cruz -document mensagens . Você visualizar os navegadores que suportam esse recurso aqui: http://caniuse.com/#feat=x de mensagens -doc.

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

Answer 7

Acabei de vir contra esta em cromo e a única coisa que funcionou foi a remoção e substituição do iframe. Exemplo:

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

simples Bonito, não abrangidos em outras respostas.

Answer 8

para nova url

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

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

Recarregar

location.reload();

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

Answer 9

Um refinamento no post de yajra ... Eu gosto da idéia, mas odeio a idéia de detecção do navegador.

Eu preferiria ter a visão de ppk de usar a detecção de objetos em vez de detecção de navegador, ( http://www.quirksmode.org/js/support.html ), porque então você está realmente testando os recursos do navegador e agir em conformidade, e não o que você acha que o navegador é capaz de naquele momento. também não exige muito feio ID navegador seqüência de análise, e não exclui navegadores perfeitamente capazes de que você não sabe nada sobre.

Assim, em vez de olhar para navigator.AppName, por que não fazer algo assim, realmente testar para os elementos que você usa? (Você pode usar try {} blocos se você quiser ficar ainda mais extravagante, 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!");
    }
}

Desta forma, você pode ir tentar como muitos permutações diferentes como você gosta ou é necessário, sem causar erros de javascript, e fazer algo sensato, se tudo mais falhar. É um pouco mais de trabalho para testar seus objetos antes de usá-los, mas, IMO, contribui para uma melhor e código mais à prova de falhas.

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

Talvez eu poderia fazer ainda melhor, realmente testar para a função de recarga, mas isso é suficiente para mim agora. :)

Answer 10

A simples substituição do atributo src do elemento iframe não foi satisfatória no meu caso, porque se poderia ver o conteúdo antigo até que a nova página é carregada. Isso funciona melhor se você quiser dar instant feedback visual:

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

Answer 11

No IE8 usando .Net, definindo o iframe.src pela primeira vez é ok, mas definindo o iframe.src para o segundo tempo não é elevar o page_load da página iframes. Para resolvê-lo i iframe.contentDocument.location.href = "NewUrl.htm" usado.

Discover quando usado jQuery Thickbox e tentou reabrir mesma página no iframe thickbox. Em seguida, ele apenas mostrou a página anterior que foi aberto.

Answer 12

Use recarregar para o IE e src set para outros navegadores. (Recarga 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;
}

Answer 13

Você já considerou anexando 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>

Não vai ser visto e se você está ciente do parâmetro a ser seguro, então ele deve estar bem.

Answer 14

Se você está usando Jquery, em seguida, há 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'));

Answer 15

Agora, para fazer este trabalho no Chrome 66, tente o seguinte:

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

Answer 16

Se todos os itens acima não funciona para você:

window.location.reload();

Este, por algum motivo atualizado meu iframe em vez de todo o script. Talvez porque ele é colocado no próprio quadro, enquanto todas essas soluções getElemntById trabalhar quando você tenta atualizar um quadro de outro frame?

Ou eu não entendo esse jargão totalmente e falar, de qualquer maneira isso funcionou para mim como um encanto:)

Answer 17

Usando self.location.reload() o recarregamento da 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

Se você tentou todas as outras sugestões, e não poderia obter qualquer um deles para o trabalho (como eu não podia), está aqui algo que você pode tentar que podem ser úteis.

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

---

I inicialmente estabelecido para tentar salvar algum tempo com RWD e teste cross-browser. Eu queria criar uma página rápida que abrigava um bando de iframes, organizados em grupos que eu iria exibir / ocultar à vontade. Logicamente que você gostaria de ser capaz de facilmente e rapidamente atualizar qualquer quadro.

Gostaria de salientar que o projeto que eu estou trabalhando atualmente, o único em uso neste teste-cama, é um site de uma página com locais indexados (por exemplo index.html # casa). Isso pode ter tido algo a ver com por que eu não poderia obter qualquer das outras soluções para refrescar o meu quadro particular.

Dito isso, eu sei que não é a coisa mais limpa do mundo, mas funciona para os meus propósitos. Espero que isso ajude alguém. Agora, se eu pudesse descobrir como manter o iframe de rolagem da página pai cada vez que há animação dentro iframe ...

EDIT: Eu percebi que isso não "atualizar" o iframe como eu esperava que seria. Ele irá recarregar embora fonte inicial do iframe. Ainda não consegue descobrir por que eu não poderia obter qualquer uma das outras opções de trabalho ..

UPDATE: A razão que eu não poderia obter qualquer um dos outros métodos para trabalho é porque eu estava testando-os em Chrome e Chrome não permitirá que você para acessar o conteúdo de um iframe (Explicação: é provável que futuras versões do apoio Chrome contentWindow / contentDocument quando iFrame carrega um HTML local arquivo a partir do arquivo html local? ) se ele não se originam do mesmo local (tanto quanto eu entendo). Após mais testes, eu não posso acesso contentWindow no FF também.

ALTERADA 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 20

Para fins de depuração pode-se abrir a mudança consola o contexto de execução para o quadro que ele quer atualizado e fazer document.location.reload()

Answer 21

Outra solução.

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

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