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

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?

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

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

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

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.

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

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

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

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.

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.

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.

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

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. :)

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

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.

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

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

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

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.

Une autre solution.

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

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

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();" />

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

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

À 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()