Quelle est la meilleure façon de rafraîchir un iframe?

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

être prudent, dans Firefox, window.frames[] ne peut pas être indexé par les id, mais par son nom ou de l'index

Si vous utilisez jQuery, cela semble fonctionner:

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

J'espère que c'est pas trop moche pour stackoverflow.

Ajouter un espace vide également recharger l'iFrame automatiquement.

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

Je viens de contre cette en chrome et la seule chose qui a fonctionné a été le retrait et le remplacement de l'iframe. Exemple:

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

Assez simple, non couverts dans les autres réponses.

Simplement remplacer le src attribut de l'élément iframe n'est pas satisfaisant dans mon cas, car on pourrait voir l'ancien contenu jusqu'à ce que la nouvelle page est chargée. Cela fonctionne mieux si vous voulez donner un retour visuel instantané:

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

Maintenant à faire ce travail sur chrome 66, essayez ceci:

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

Utilisation de rechargement pour IE et définir src pour les autres navigateurs. (recharge ne fonctionne pas sur FF)
testé sur IE 7,8,9 et 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;
}

Si tous les ci-dessus ne fonctionne pas pour vous:

window.location.reload();

Ce pour quelque raison rafraîchi mon iframe au lieu de l'ensemble du script. Peut-être parce qu'il est placé dans le cadre lui-même, alors que tous ceux getElemntById solutions de travail lorsque vous essayez d'actualiser une image à partir d'une autre image?

Ou je ne comprends pas entièrement et de parler de charabia, de toute façon cela a fonctionné pour moi comme un charme 🙂

À l'aide de self.location.reload() recharger l'iframe.

HTML:

<iframe src="https://vivekkumar11432.wordpress.com/" width="300" height="300"></iframe>
<br><br>
<input type='button' value="Reload"  onclick="self.location.reload();" />

Si vous avez essayé toutes les autres suggestions, et ne pouvait pas faire de à travailler (comme je ne pouvais pas), voici quelque chose que vous pouvez essayer qui peut être utile.

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

---

J'ai d'abord mis à essayer de sauver un peu de temps avec RWD et de la croix-test du navigateur. J'ai voulu créer une page rapide qui abritait un tas d'iframes, organisés en groupes que je voudrais montrer/masquer à volonté. Logiquement, vous voulez être en mesure de facilement et rapidement actualiser une image donnée.

Je note que le projet sur lequel je travaille actuellement, la seule en usage dans ce banc d'essai, est un site avec des emplacements indexés (par exemple index.html#maison). Qui ont peut-être eu quelque chose à voir avec pourquoi je ne pouvais pas obtenir toutes les autres solutions pour actualiser mon image particulière.

Cela dit, je sais que c'est pas le plus propre chose dans le monde, mais il travaille pour mes fins. Espérons que cela aide quelqu'un. Maintenant, si seulement je pouvais comprendre comment garder l'iframe à partir du défilement de la page parent chaque fois qu'il y a de l'animation à l'intérieur de l'iframe...

EDIT:
J'ai réalisé que ce n'est pas "l'actualisation" de l'iframe, comme je l'avais espéré qu'il le ferait. Il permettra de recharger l'iframe de la source initiale si. Ne peut toujours pas comprendre pourquoi je ne pouvais pas obtenir toutes les autres options de travail..

Mise à JOUR:
La raison pour laquelle je ne pouvais pas obtenir toutes les autres méthodes pour travailler, c'est parce que j'ai été le tester en Chrome et Chrome ne vous permettra pas d'accéder à un contenu de l'iframe (Explication: Il est probable que les futures versions de Chrome soutien contentWindow/contentDocument quand iFrame charge un fichier html local de fichier html local?) si elle ne vient pas du même endroit (donc autant que je le comprends). Après d'autres tests, je ne peux pas accéder contentWindow dans FF soit.

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

Une autre solution.

const frame = document.getElementById("my-iframe");
frame.parentNode.replaceChild(frame.cloneNode(), frame);