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