Quel est le meilleur moyen de recharger / actualiser un iframe?

Question

J'aimerais recharger un < iframe > à l'aide de JavaScript. Le meilleur moyen que j’ai trouvé jusqu’à présent était de définir l’attribut src de l’iframe, mais ce n’est pas très clair. Des idées?

Answer 1

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

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

Answer 2

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

Cela rechargera iframe , même à travers les domaines! Testé avec IE7 / 8, Firefox et Chrome.

Answer 3

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.

Answer 4

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

Answer 5

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

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

Answer 6

En raison de la règle d'origine , cela ne fonctionnera pas si vous modifiez un iframe pointant sur un domaine différent. Si vous pouvez cibler des navigateurs plus récents, envisagez d'utiliser la croix de HTML5 -document messagerie . Vous affichez les navigateurs prenant en charge cette fonctionnalité ici: http://caniuse.com/#feat=x -doc-messagerie .

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 permet également de définir le problème.

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

Answer 8

pour la 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.

Answer 9

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

Je préfère prendre l'avis de ppk d'utiliser la détection d'objet au lieu de la détection par navigateur, ( http://www.quirksmode.org/js/support.html ), vous testez les capacités du navigateur et agissez en conséquence, plutôt que ce que le navigateur est capable de faire à ce moment-là. De plus, ne nécessite pas une analyse syntaxique aussi laide des identifiants de navigateur et n'exclut pas les navigateurs parfaitement capables dont vous ne connaissez rien.

Ainsi, au lieu de regarder navigator.AppName, pourquoi ne pas faire quelque chose comme ceci, en testant réellement les éléments que vous utilisez? (Vous pouvez utiliser des blocs try {} si vous voulez être 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 que vous le souhaitez ou si elles sont nécessaires, sans provoquer d'erreur javascript, et faire quelque chose de raisonnable si tout le reste échoue. Il est un peu plus fastidieux de tester vos objets avant de les utiliser, mais IMO crée un code de meilleure qualité et plus sûr.

J'ai travaillé pour IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m) et Opera (12.0.2) sous Windows.

Peut-être que je pourrais faire encore mieux en testant réellement la fonction de rechargement, mais cela me suffit pour le moment. :)

Answer 10

Remplacer simplement l'attribut src 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);

Answer 11

Dans IE8 utilisant .Net, définir le iframe.src pour la première fois est ok, mais définir le iframe.src pour la deuxième fois ne déclenche pas le chargement_page de la page iframed. Pour le résoudre, j'ai utilisé iframe.contentDocument.location.href = "NewUrl.htm" .

Découvrez-le en utilisant jQuery thickBox et en essayant de rouvrir la même page dans la ifbox épaisse. Ensuite, il vient de montrer la page précédente qui a été ouverte.

Answer 12

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

Answer 13

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>

Cela ne sera pas vu & amp; si vous savez que le paramètre est sûr, alors ça devrait aller.

Answer 14

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

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

Answer 15

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

Answer 16

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

window.location.reload();

Ceci pour une raison quelconque a rafraîchi 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 d'actualiser un cadre à partir d'un autre cadre?

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

Answer 17

L'utilisation de 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();" />

Answer 18

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

Answer 19

Si vous avez essayé toutes les autres suggestions et que vous ne parveniez pas à les faire fonctionner (comme je ne le pouvais pas), voici quelque chose que vous pouvez essayer et qui pourrait ê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);
});

Au départ, je me suis efforcé de gagner du temps avec RWD et les tests sur plusieurs navigateurs. Je voulais créer une page rapide contenant un groupe d’iframes, organisés en groupes que je voudrais afficher / masquer à volonté. Logiquement, vous voudriez pouvoir actualiser facilement et rapidement n’importe quel 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 comportant des emplacements indexés (par exemple, index.html # home). C’est peut-être pour cette raison que je n’ai pu obtenir aucune des autres solutions pour actualiser mon cadre particulier.

Cela dit, je sais que ce n’est pas la chose la plus propre au monde, mais que cela fonctionne pour moi. J'espère que ça 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 dans iframe ...

MODIFIER: J'ai réalisé que cela ne "rafraîchissait pas". l'iframe comme je l'avais espéré. Cependant, il rechargera la source initiale de l'iframe. Je n'arrive toujours pas à comprendre pourquoi je ne pouvais faire fonctionner aucune des autres options.

MISE À JOUR: La raison pour laquelle je ne pouvais pas utiliser les autres méthodes, c'est parce que je les testais dans Chrome. Chrome ne vous permet pas d'accéder au contenu d'un iframe (Explication: Est-il probable que les futures versions de Chrome prennent en charge contentWindow / contentDocument lorsque iFrame charge un html local fichier à partir d'un fichier HTML local? ) s'il ne provient pas du même endroit (pour autant que je sache). Après des tests supplémentaires, je ne peux pas non plus accéder à contentWindow en FF.

JS MODIFIÉ

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

À des fins de débogage, vous pouvez ouvrir la console, modifier le contexte d'exécution pour le cadre qu'il souhaite actualiser et faire document.location.reload ()

Answer 21

Une autre solution.

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

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