Quelle est la meilleure façon de recharger / rafraîchir un iframe?

Je voudrais recharger un utilisant JavaScript. La meilleure façon de trouver jusqu’à maintenant était l’atsortingbut src l’iframe, mais ce n’est pas très propre. Des idées?

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

soyez prudent, 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 l’ iframe , même sur plusieurs 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.

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

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

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

En raison de la même politique d’origine , cela ne fonctionnera pas lors de la modification d’un iframe pointant vers un autre domaine. Si vous pouvez cibler les nouveaux navigateurs, envisagez d’utiliser la messagerie croisée de HTML5 . Vous affichez les navigateurs qui prennent en charge cette fonctionnalité ici: http://caniuse.com/#feat=x-doc-messaging .

Si vous ne pouvez pas utiliser les fonctionnalités 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 de définition du problème.

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

Je préfère prendre en compte le sharepoint vue de ppk sur l’utilisation de la détection d’object au lieu de la détection de navigateur ( http://www.quirksmode.org/js/support.html ), car vous testez alors les capacités du navigateur et agissez en conséquence plutôt que ce que vous pensez que le navigateur est capable à ce moment-là. Aussi, n’exige pas trop l’parsing syntaxique 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 les éléments que vous utilisez? (Vous pouvez utiliser les blocs {} si vous voulez devenir encore plus sophistiqué, 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 est nécessaire, sans causer d’erreur de javascript, et faire quelque chose de sensé si tout le rest échoue. Il est un peu plus difficile de tester vos objects avant de les utiliser, mais IMO améliore le code et le rend plus fiable.

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

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 en cours.

Remplacer simplement l’atsortingbut src de l’élément iframe n’était pas satisfaisant dans mon cas, car on pouvait voir l’ancien contenu jusqu’à ce que la nouvelle page soit chargée. Cela fonctionne mieux si vous voulez donner un retour visuel instantané:

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

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

Découvrez-le lorsque jQuery thickBox est utilisé et essayez de rouvrir la même page dans iframe dans la liste. 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; } 

Je viens de me heurter à cela en chrome et la seule chose qui fonctionnait était de supprimer et de remplacer l’iframe. Exemple:

 $(".iframe_wrapper").find("iframe").remove(); var iframe = $(''); $.find(".iframe_wrapper").append(iframe); 

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

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

   

On ne le verra pas et si vous savez que le paramètre est sûr, ça devrait aller.

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

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 les solutions getElemntById fonctionnent lorsque vous essayez de rafraîchir un cadre à partir d’un autre cadre?

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

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

Si vous avez essayé toutes les autres suggestions et que vous ne parveniez pas à les faire fonctionner (comme je ne pouvais pas le faire), vous pouvez essayer quelque chose qui pourrait vous être utile.

HTML

 Refresh  

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, j’ai décidé d’essayer de gagner du temps avec les tests RWD et cross-browser. Je voulais créer une page rapide contenant un tas d’iframes, organisés en groupes que je montrerais / cacherais à volonté. Logiquement, vous voudriez pouvoir actualiser facilement et rapidement n’importe quelle image.

Je dois noter que le projet sur lequel je travaille actuellement, celui qui est utilisé dans ce banc d’essai, est un site d’une page avec des emplacements indexés (par exemple, index.html # home). Cela pourrait avoir quelque chose à voir avec la raison pour laquelle je ne pouvais 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 moi. J’espère que cela aide quelqu’un. Maintenant, si seulement je pouvais comprendre comment garder l’iframe de faire défiler la page parent chaque fois qu’il y a de l’animation dans iframe …

EDIT: 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 ne pouvais pas utiliser les autres options.

MISE À JOUR: La raison pour laquelle je ne pouvais pas faire fonctionner les autres méthodes est que je les testais dans Chrome, et Chrome ne vous autoriserait pas à 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 fichier HTML local à partir d’un fichier html local? ) s’il ne provient pas du même emplacement (pour autant que je le sache). Après des tests supplémentaires, je ne peux pas non plus accéder à contentWindow dans FF.

MODIFIE 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).toSsortingng(); function removeSrc() { $(targetID).attr('src', ''); } setTimeout (removeSrc, 100); function replaceSrc2() { $(targetID).attr('src', targetLoc); } setTimeout (replaceSrc2, 200); } }); 

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

Une autre solution.

 const frame = document.getElementById("my-iframe"); frame.parentNode.replaceChild(frame.cloneNode(), frame); 

Utiliser self.location.reload() rechargera l’iframe.