Quelle est la meilleure façon de recharger / actualiser un iframe?


242

Je voudrais recharger un <iframe>utilisant JavaScript. La meilleure façon que j'ai trouvée jusqu'à présent était de définir l' srcattribut iframe sur lui-même, mais ce n'est pas très propre. Des idées?


4
Y a-t-il une raison pour laquelle la définition de l' srcattribut sur lui-même n'est pas propre? Il semble que ce soit la seule solution qui fonctionne sur tous les navigateurs et sur tous les domaines
mirhagk

La définition de l' srcattribut lui-même provoque des problèmes si vous disposez d'un lien ailleurs qui cible le <iframe>. Ensuite, le cadre affichera la page initiale telle que conçue à l'origine.
E. van Putten

Réponses:


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

attention, dans Firefox, window.frames[]ne peut pas être indexé par id, mais par nom ou index


26
En fait, cette approche n'a pas fonctionné pour moi dans Chrome. Il n'y avait pas de propriété «contentWindow». Bien qu'il ait été possible d'utiliser document.getElementById ('some_frame_id'). Location.reload (); La méthode qui a fonctionné pour FF et Chrome était document.getElementById ('iframeid'). Src = document.getElementById ('iframeid'). Src
Mike Bevz

1
@MikeBevz peut location.reload est également accessible en utilisant le sélecteur Jquery?
Jitender Mahlawat

2
absolu c'est du travail, mais coincé avec la même politique d'origine du domaine == a
Bobby Stenly

6
frames[1].location.href.reload()et window.frames['some_frame_id'].location.href.reload()peut également être utilisé
Daniël W. Crompton

1
Si vous ne pouvez pas accéder à la fenêtre iframe, vous devez modifier l'attribut src de la balise iframe.
Maciej Krawczyk

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

Il rechargera le iframe, même entre les domaines! Testé avec IE7 / 8, Firefox et Chrome.


68
document.getElementById('iframeid').src += '';fonctionne également: jsfiddle.net/Daniel_Hug/dWm5k
Web_Designer

3
Et que faites-vous exactement si la source de l'iframe a changé depuis son ajout à la page?
Niet the Dark Absol

Fonctionne pour moi sur Chrome ver33! Étrange que nous ne pouvons pas simplement utiliser, reloadmais cela est autorisé.
Luke

8
Notez que si le iframe src contient un hachage (par exemple http://example.com/#something), cela ne rechargera pas le cadre. J'ai utilisé l'approche consistant à ajouter un paramètre de requête jetable comme ?v2à l'URL avant le hachage.
user85461

Cela fait remonter l'iframe vers le haut.
MrTux

60

Si vous utilisez jQuery, cela semble fonctionner:

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

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


6
Ceci, sans jQuery: var iframe = document.getElementById("your_iframe"); iframe.src = src;
Seagrass

Veuillez noter à toute personne future que cette solution (et la solution plain js) est la meilleure à utiliser, car elle est multiplateforme et fonctionne sur plusieurs domaines.
mirhagk

13
@Seagrass Je pense que vous voulez dire:var iframe = document.getElementById("your_iframe"); iframe.src = iframe.src;
maxisme

15

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

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


8

En raison de la même politique d'origine , cela ne fonctionnera pas lors de la modification d'un iframe pointant vers un domaine différent. Si vous pouvez cibler des navigateurs plus récents, pensez à utiliser la messagerie croisée HTML5 . Vous voyez les navigateurs qui prennent en charge cette fonctionnalité ici: http://caniuse.com/#feat=x-doc-messaging .

Si vous ne pouvez pas utiliser la fonctionnalité HTML5, vous pouvez suivre les astuces décrites ici: http://softwareas.com/cross-domain-communication-with-iframes . Cette entrée de blog fait également un bon travail pour définir le problème.


7

Je viens de me heurter à cela en chrome et la seule chose qui a fonctionné a été de supprimer et de remplacer l'iframe. Exemple:

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

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


4

pour une nouvelle URL

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

La méthode assign () charge un nouveau document.

recharger

location.reload();

La méthode reload () est utilisée pour recharger le document actuel.


4

Le simple remplacement de l' srcattribut de l'élément iframe n'était pas satisfaisant dans mon cas car on verrait l'ancien contenu jusqu'à ce que la nouvelle page soit chargée. Cela fonctionne mieux si vous souhaitez donner un retour visuel instantané:

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

Je viens de tester la même approche mais sans setTimeout - et cela a fonctionné pour moi. en fait, juste iframe.setAttribute ('src', iframe.getAttribute ('src'))
bonbonez

3

Un raffinement sur le post de yajra ... J'aime la pensée, mais je déteste l'idée de détection de navigateur.

Je préfère voir ppk utiliser la détection d'objets au lieu de la détection de navigateur ( http://www.quirksmode.org/js/support.html ), car vous testez en fait les capacités du navigateur et agissez en conséquence, plutôt que ce que vous pensez que le navigateur est capable de faire à ce moment-là. Ne nécessite pas non plus une analyse laide des chaînes d'ID de navigateur et n'exclut pas les navigateurs parfaitement capables dont vous ne savez rien.

Donc, au lieu de regarder navigator.AppName, pourquoi ne pas faire quelque chose comme ça, tester réellement les éléments que vous utilisez? (Vous pouvez utiliser des blocs try {} si vous voulez devenir encore plus chic, mais cela a fonctionné pour moi.)

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

De cette façon, vous pouvez essayer autant de permutations différentes que vous le souhaitez ou si cela est nécessaire, sans provoquer d'erreurs javascript, et faire quelque chose de raisonnable si tout le reste échoue. C'est un peu plus de travail pour tester vos objets avant de les utiliser, mais, OMI, rend le code meilleur et plus sûr.

A travaillé pour moi dans IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m) et Opera (12.0.2) sous Windows.

Je pourrais peut-être faire encore mieux en testant la fonction de rechargement, mais cela me suffit pour le moment. :)


3

Maintenant, pour que cela fonctionne sur Chrome 66, essayez ceci:

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

2

Dans IE8 utilisant .Net, la définition iframe.srcde la première fois est correcte, mais la définition iframe.srcde la deuxième fois n'augmente pas page_loadla page iframed. Pour le résoudre, j'ai utiliséiframe.contentDocument.location.href = "NewUrl.htm" .

Découvrez-le lorsqu'il est utilisé jQuery thickBox et essayez de rouvrir la même page dans l'iframe de thickbox. Ensuite, il a juste montré la page précédente qui a été ouverte.


2

Utilisez reload pour IE et définissez src pour les autres navigateurs. (le rechargement 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;
}

2

Si vous utilisez Jquery, il y a un code de ligne.

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

et si vous travaillez avec le même parent,

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

1

Si tout ce qui précède ne fonctionne pas pour vous:

window.location.reload();

Pour une raison quelconque, cela a actualisé mon iframe au lieu du script entier. Peut-être parce qu'il est placé dans le cadre lui-même, alors que toutes ces solutions getElemntById fonctionnent lorsque vous essayez de rafraîchir un cadre à partir d'un autre cadre?

Ou je ne comprends pas tout cela et je parle de charabia, de toute façon cela a fonctionné pour moi comme un charme :)


1

Avez-vous envisagé d'ajouter à l'URL un paramètre de chaîne de requête sans signification?

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

Il ne sera pas vu et si vous êtes conscient que le paramètre est sûr, alors ça devrait aller.


1

Une autre solution.

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

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

Un inconvénient de cela est de modifier l'arborescence DOM du document racine et entraînera une nouvelle peinture. J'ai utilisévar url = ifr.src; ifr.src = null; ifr.src = url;
Pocketsand

Je pense que le rechargement d'un iframe provoquera toujours une repeinture quel que soit le code utilisé.
Vasile Alexandru Peşte

1

L'utilisation self.location.reload()rechargera l'iframe.

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


1
qui rechargent toute la fenêtre principale
pery mimon

0
<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script> 

1
Pas le choix que j'utiliserais mais je suppose que ça ferait l'affaire. Avec du code supplémentaire que vous auriez pu ajouter.
transilvlad

0

Si vous avez essayé toutes les autres suggestions et que vous ne parvenez pas à en faire fonctionner une (comme je ne l'ai pas fait), voici quelque chose que vous pouvez essayer et 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 essayé de gagner du temps avec les tests RWD et cross-browser. Je voulais créer une page rapide qui abritait un tas d'iframes, organisés en groupes que je montrerais / cacherais à volonté. Logiquement, vous souhaitez pouvoir actualiser facilement et rapidement un cadre donné.

Je dois noter que le projet sur lequel je travaille actuellement, celui utilisé dans ce banc d'essai, est un site d'une page avec des emplacements indexés (par exemple index.html # home). Cela peut avoir quelque chose à voir avec la raison pour laquelle je n'ai pu obtenir aucune des autres solutions pour rafraîchir mon cadre particulier.

Cela dit, je sais que ce n'est pas la chose la plus propre au monde, mais cela fonctionne pour mes besoins. J'espère que cela aide quelqu'un. Maintenant, si seulement je pouvais comprendre comment empêcher l'iframe de faire défiler la page parent à chaque fois qu'il y a une animation à l'intérieur de l'iframe ...

ÉDITER: J'ai réalisé que cela ne «rafraîchit» pas l'iframe comme je l'espérais. Il rechargera cependant la source initiale de l'iframe. Je n'arrive toujours pas à comprendre pourquoi je n'ai pas pu faire fonctionner les autres options ..

MISE À JOUR: La raison pour laquelle je n'ai pas réussi à faire fonctionner les autres méthodes est parce que je les testais dans Chrome, et Chrome ne vous permettra pas d'accéder au contenu d'une iframe (Explication: Est-il probable que les futures versions de Chrome prennent en charge le contenu Windows / contentDocument lorsque iFrame charge un fichier html local à partir d'un fichier html local? ) s'il ne provient pas du même emplacement (pour autant que je le comprenne). Après des tests supplémentaires, je ne peux pas non plus accéder à contentWindow dans FF.

JS AMENDÉ

$('.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);
    }
});

0

À des fins de débogage, on pourrait ouvrir la console changer le contexte d'exécution en le cadre qu'il veut rafraîchir et faire document.location.reload()

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.