web-dev-qa-db-fra.com

Comment actualiser un IFrame en utilisant Javascript?

J'ai une page Web avec un IFrame et un bouton. Une fois le bouton enfoncé, j'ai besoin que le IFrame soit actualisé. Est-ce possible, si oui, comment? J'ai cherché et n'ai trouvé aucune réponse.

javascriptiframe
97
Roland
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;
118
kjagiello

Cela devrait aider:

document.getElementById('FrameID').contentWindow.location.reload(true);

EDIT: Correction du nom de l'objet selon le commentaire de @ Joro.

96
nfechner

à condition que l'iframe soit chargé à partir du même domaine, vous pouvez le faire, ce qui est un peu plus logique:

iframe.contentWindow.location.reload();
11
Horia Dragomir

Fonctionne pour IE, Mozzila, Chrome

document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);
6
Marek Pavelek

Vous pouvez utiliser cette méthode simple

function reloadFrame(iFrame) {

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

}
3
Vasile Alexandru Peste

2017:

Si c'est dans le même domaine, juste:

iframe.contentWindow.location.reload();

marchera. 

2
pery mimon

Je l'ai eu de ici

var f = document.getElementById('iframe1');
f.src = f.src;
2
Amarghosh

Voici l'extrait de code HTML:

<td><iframe name="idFrame" id="idFrame" src="chat.txt" width="468" height="300"></iframe></td>

Et mon code Javascript:

window.onload = function(){
setInterval(function(){
    parent.frames['idFrame'].location.href = "chat.txt";
},1000);}
1
Tony

Réinitialiser l'attribut src directement:

iframe.src = iframe.src;

Réinitialisation de la src avec un horodatage pour le contournement du cache:

iframe.src =  iframe.src.split("?")[0] + "?_=" + new Date().getTime();

Effacement de l’option src lorsque l’interrogation de chaînes de requête n’est pas possible (URI des données):

var wasSrc = iframe.src

iframe.onload = function() {
    iframe.onload = undefined;
    iframe.src = wasSrc;
}
1
lcharbon

Si vous utilisez des chemins de hachage (tels que mywebsite.com/#/my/url) qui pourraient ne pas actualiser les cadres lors du changement de hachage:

<script>
    window.onhashchange = function () {
        window.setTimeout(function () {
            let frame = document.getElementById('myFrame');
            if (frame !== null) {frame.replaceWith(frame);}
        }, 1000);
    }
</script>

Malheureusement, si vous n'utilisez pas le délai d'attente, JS peut essayer de remplacer le cadre avant que la page ait fini de charger le contenu (ce qui charge l'ancien contenu). Je ne suis pas encore sûr de la solution de contournement.

1
NotoriousPyro

Si vous avez plusieurs iFrames dans la page, alors ce script peut être utile. Je suppose qu’il existe une valeur spécifique dans la source iFrame qui peut être utilisée pour trouver l’iFrame spécifique.

var iframes = document.getElementsByTagName('iframe');
var yourIframe = null
for(var i=0; i < iframes.length ;i++){
    var source =  iframes[i].attributes.src.nodeValue;
    if(source.indexOf('/yourSorce') > -1){
        yourIframe = iframes[i];
    }   
}
var iSource = yourIframe.attributes.src.nodeValue;
yourIframe.src = iSource;

Remplacez "/ yourSource" par la valeur dont vous avez besoin.

0
sarvesh singh

Si l'URL de votre iframe ne change pas, vous pouvez simplement la recréer.

Si votre iframe ne provient pas de la même origine (schéma de protocole, nom d'hôte et port), vous ne pourrez pas connaître l'URL actuelle dans l'iframe. Vous aurez donc besoin d'un script dans le document iframe pour échanger des messages avec sa fenêtre parente la fenêtre de la page).

Dans le document iframe:

window.addEventListener('change', function(e) {
  if (e.data === 'Please reload yourself') {
    var skipCache = true; // true === Shift+F5
    window.location.reload(skipCache);
  }
}

Dans votre page:

var iframe = document.getElementById('my-iframe');
var targetOrigin = iframe.src; // Use '*' if you don't care
iframe.postMessage('Please reload yourself', targetOrigin);
0
michelpm