web-dev-qa-db-fra.com

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

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

javascriptiframe
222
caffo
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

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

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

180
evko

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.

58
lousygarua
window.frames['frameNameOrIndex'].location.reload();
14
scunliffe

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

document.getElementById('id').src += '';
12
Yohanes AI

En raison de même règle d'origine , cela ne fonctionnera pas lors de la modification d'un iframe pointant vers un autre domaine. Si vous pouvez cibler de nouveaux navigateurs, utilisez la messagerie multi-documents de HTML5 . Vous affichez les navigateurs prenant 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 permet également de définir le problème.

8
big lep

Je viens de me heurter à cela dans 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.

6
Liam M

Le simple remplacement de 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);
4
Patrick Rudolph

pour nouvelle url

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

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

recharger

location.reload();

La méthode reload () permet de recharger le document actuel.

4
user2675617

Un raffinement sur le post 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 sur l'utilisation de la détection d'objet au lieu de la détection par navigateur ( http://www.quirksmode.org/js/support.html ), car vous testez en fait les capacités du navigateur et agissant en conséquence, plutôt que ce que vous pensez que le navigateur est capable de faire à ce moment-là. De plus, il ne nécessite pas une analyse syntaxique aussi laide des identifiants de navigateur, et n'exclut pas des 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 difficile de tester vos objets avant de les utiliser, mais, IMO, permet d'obtenir un code de meilleure qualité et plus sécurisé.

A travaillé pour moi dans 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. :)

3
Aaron Wallentine

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

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
yajra

Si vous utilisez Jquery, il existe 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'));
2
Paresh3489227

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 et si vous savez que le paramètre est sûr, alors ça devrait aller.

2
user1212212

Dans IE8 utilisant .Net, le réglage de iframe.src pour la première fois est correct, mais le réglage de iframe.src pour la deuxième fois ne soulève pas le page_load 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 épais. Ensuite, il a simplement montré la page précédente qui a été ouverte.

2
Shaulian

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 de tout le script. Peut-être parce qu'il est placé dans le cadre 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 du charabia, de toute façon cela a fonctionné pour moi comme un charme :)

1
Marcin Janeczek

Utiliser 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
Vivek Kumar

Pour des raisons de débogage, vous pouvez ouvrir la console, changer le contexte d’exécution pour qu’il soit actualisé et faire document.location.reload()

0
h3dkandi

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

Au départ, je me suis efforcé de gagner du temps avec les tests RWD et multi-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 un cadre donné.

Je dois noter que le projet sur lequel je travaille actuellement, celui utilisé dans ce banc d’essai, consiste en un site d’une page contenant des emplacements indexés (par exemple, index.html # home). Cela a peut-être un lien avec la raison pour laquelle 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 parente à chaque fois qu’il y a une animation dans iframe ...

EDIT: Je me suis rendu compte que cela ne "rafraîchit" 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 utiliser aucune des autres options.

UPDATE: La raison pour laquelle aucune autre méthode ne fonctionnait, c'est parce que je les testais sous Chrome et que Chrome ne vous autorisera pas à accéder au contenu d'un iframe (Explication: Est-il probable que les versions ultérieures de Chrome prennent en charge contentWindow/contentDocument lorsque iFrame charge un fichier html local à partir d'un fichier html local? =) si elle ne provient pas du même endroit (pour autant que je sache). Après des tests supplémentaires, je ne peux pas accéder à contentWindow in FF non plus.

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);
    }
});
0
Todd
<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script>
0
Sid

Une autre solution.

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

frame.parentNode.replaceChild(frame.cloneNode(), frame);
0
Vasile Alexandru Peşte