Recharger un iframe avec jQuery


151

J'ai deux iframes sur une page et l'un apporte des modifications à l'autre, mais l'autre iframe ne montre pas le changement jusqu'à ce que je rafraîchisse. Existe-t-il un moyen simple d'actualiser cette iframe avec jQuery?

<div class="project">
  <iframe id="currentElement" class="myframe" name="myframe" src="http://somesite.com/something/new"></iframe>
</div>

3
Le document iframe est-il sur un domaine différent?
Pekka

Avez-vous accès au code du site qui apparaît dans l'iFrame?
Matt Asbury

Afficher plus de code - le html pour les deux iFrames, ainsi que le code javascript que vous utilisez pour effectuer les modifications. Il est difficile de comprendre quel est le problème en ne voyant que ce que vous avez inclus jusqu'à présent.
Ben Lee

J'ai accès au code oui et l'iframe est sur un domaine différent
Matt Elhotiby

@Matt, les cadres ne sont pas autorisés à modifier le contenu des cadres sur d'autres domaines. Pour des exemples sur la façon de contourner cette restriction de script inter-domaines, voir ceci: softwareas.com/cross-domain-communication-with-iframes
Ben Lee

Réponses:


174

Si l'iframe n'était pas sur un domaine différent, vous pouvez faire quelque chose comme ceci:

document.getElementById(FrameID).contentDocument.location.reload(true);

Mais comme l'iframe se trouve sur un domaine différent, l'accès à la contentDocumentpropriété de l'iframe vous sera refusé par la stratégie de même origine .

Mais vous pouvez forcer de manière piratée l'iframe interdomaine à se recharger si votre code s'exécute sur la page parent de l'iframe, en définissant son attribut src sur lui-même. Comme ça:

// hackishly force iframe to reload
var iframe = document.getElementById(FrameId);
iframe.src = iframe.src;

Si vous essayez de recharger l'iframe à partir d'une autre iframe, vous n'avez pas de chance, ce n'est pas possible.


19
Sa question était de savoir comment y parvenir avec jQuery - pas Javascript. Voir le post de Sime Vidas ci-dessous pour la bonne réponse jQuery.
FastTrack

2
Le script ne fonctionne pas dans mon IE9 (ne pas vérifier l'autre version). Changez contentDocument en contentWindow le fait fonctionner sur IE9. document.getElementById(FrameID).contentWindow.location.reload(true);
Han He

3
Cela n'a pas fonctionné pour moi, mais j'ai fait quelque chose comme à la iframe.contentDocument.location=iframe.src; place qui a très bien fonctionné
glitchyme

3
Cette Jquery a fonctionné comme un charme pour moi:$('#map_iframe').attr('src', $('#map_iframe').attr('src'));
Topher Hunt

234
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });

2
+1 pour n'avoir qu'une seule référence à l'ID, moins susceptible de changer l'une mais d'oublier l'autre
Matthew Lock

1
@NicolaeSurdu Aussi, ceci:(function (elem) { elem.src = elem.src; }($('#iframe')[0]));
Šime Vidas

1
Pour recharger une iframe depuis l'autre, changez pour: $ ('# iframe', window.parent.document) .attr ('src', function (i, val) {return val;});
Tillito

Sur Internet Explorer, les solutions javascript comme document.getElementById(FrameID).contentWindow.location.reload(true);ne fonctionnent pas correctement. Cette réponse fonctionne mieux.
BeyazKaplan

55

vous pouvez également utiliser jquery. C'est la même chose qu'Alex a proposé en utilisant simplement JQuery:

 $('#currentElement').attr("src", $('#currentElement').attr("src"));

3
L'avantage de cette solution est la lisibilité. Bien que pas aussi efficace que la réponse de Vidas, ce qui se passe est évident.
Robert Egginton

Je suis d'accord, j'ai aussi tendance à préférer la lisibilité de cette solution
Yonatan Naor

var f = $('#iframeX') ; f.attr( 'src', f.attr( 'src' ))peut être plus robuste à maintenir et à lire
Andreas Dietrich

9

Recharger un iframe avec jQuery

créer un lien dans l'iframe disons avec id = "reload" puis utiliser le code suivant

$('#reload').click(function() {
    document.location.reload();
});

et vous êtes prêt à utiliser tous les navigateurs.

Recharger un iframe avec HTML (pas de demande Java Script)

Il a une solution plus simple: qui fonctionne sans javaScript dans (FF, Webkit)

juste faire une ancre à côté de votre iframe

   <a href="#" target="_SELF">Refresh Comments</a>

Lorsque vous cliquez sur cette ancre, il suffit de rafraîchir votre iframe

Mais si vous avez un paramètre envoyé à votre iframe, procédez comme suit.

  <a id="comnt-limit" href="?id=<?= $page_id?>" target="_SELF">Refresh Comments</a>

n'ont pas besoin d'url de page car -> target = "_ SELF" faites-le pour vous


9

avec jquery, vous pouvez utiliser ceci:

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

Cette solution si vous souhaitez actualiser l'iframe actuelle, où nous en sommes. Merci beaucoup!
DaemonHK

5

Juste en retour la réponse d'Alex mais avec jQuery

var currSrc = $("#currentElement").attr("src");
$("#currentElement").attr("src", currSrc);

4

Voici une autre façon

$( '#iframe' ).attr( 'src', function () { return $( this )[0].src; } );

1
$( '#iframe' ).attr('src', $( '#iframe' ).attr('src'));
zanderwar

3

Je suis presque sûr que tous les exemples ci-dessus ne rechargent que l'iframe avec son src d'origine, pas son URL actuelle.

$('#frameId').attr('src', function () { return $(this).contents().get(0).location.href });

Cela devrait recharger en utilisant l'url actuelle.


2

Si vous êtes multi-domaines, le simple fait de redéfinir le src sur la même URL ne déclenchera pas toujours un rechargement, même si le hachage de l'emplacement change.

J'ai rencontré ce problème lors de la construction manuelle des iframes des boutons Twitter, qui ne s'actualiseraient pas lorsque je mettais à jour les URL.

Les boutons comme Twitter ont la forme: .../tweet_button.html#&_version=2&count=none&etc=...

Puisque Twitter utilise le fragment de document pour l'URL, la modification du hachage / fragment n'a pas rechargé la source, et les cibles de bouton ne reflétaient pas mon nouveau contenu chargé en ajax.

Vous pouvez ajouter un paramètre de chaîne de requête pour forcer le rechargement (par exemple: "?_=" + Math.random() mais cela gaspillera de la bande passante, en particulier dans cet exemple où l'approche de Twitter essayait spécifiquement d'activer la mise en cache.

Pour recharger quelque chose qui ne change qu'avec des balises de hachage, vous devez supprimer l'élément, ou changer le src, attendre que le thread se termine, puis le réattribuer. Si la page est toujours en cache, cela ne devrait pas nécessiter de hit réseau, mais déclenche le rechargement du cadre.

 var old = iframe.src;
 iframe.src = '';
 setTimeout( function () {
    iframe.src = old;
 }, 0);

Mise à jour : l'utilisation de cette approche crée des éléments d'historique indésirables. Au lieu de cela, supprimez et recréez l'élément iframe à chaque fois, ce qui permet à ce bouton back () de fonctionner comme prévu. Aussi bien de ne pas avoir la minuterie.


2

Juste la réponse d'Alex, mais avec jQuery:

var e = $('#myFrame');
    e.attr("src", e.attr("src"));

Ou vous pouvez utiliser une petite fonction:

function iframeRefresh(e) {
    var c = $(e);
        c.attr("src", c.attr("src"));
}

J'espère que cela aide.



1

Ceci est possible avec un simple JavaScript.

  • Dans iFrame1, créez une fonction JavaScript appelée dans la balise body onload. Je le fais vérifier une variable côté serveur que j'ai définie, donc il n'essaye pas d'exécuter la fonction JavaScript dans iframe2 à moins que j'aie pris une action spécifique dans iframe1. Vous pouvez configurer cela comme une fonction déclenchée par une pression sur un bouton ou comme vous le souhaitez dans iframe1.
  • Ensuite, dans iframe2, vous avez la deuxième fonction que je liste ci-dessous. La fonction dans iframe1 va essentiellement à la page parente et utilise ensuite la window.framessyntaxe pour déclencher une fonction JavaScript dans iframe2. Assurez-vous simplement d'utiliser le id/ namede iframe2 et non le src.
//function in iframe1
function refreshIframe2()
{
    if (<cfoutput>#didValidation#</cfoutput> == 1)
    {   
         parent.window.frames.iframe2.refreshPage();
    }
}

//function in iframe2
function refreshPage()
{   
    document.location.reload();
}

1

// actualise tous les iframes de la page

var f_list = document.getElementsByTagName('iframe');

 for (var i = 0, f; f = f_list[i]; i++) {
                            f.src = f.src;
                        }

0
    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

La solution multi-navigateurs est:

    ifrX.src = ifrX.contentWindow.location

ceci est particulièrement utile lorsque <iframe> est la cible d'un <form>


pourquoi jQuery?! quand simple js disponible
bortunac

0

RÉSOLU! Je m'inscris à stockoverflow juste pour vous partager la seule solution (au moins en ASP.NET/IE/FF/Chrome) qui fonctionne! L'idée est de remplacer la valeur innerHTML d'un div par sa valeur innerHTML actuelle.

Voici l'extrait de code HTML:

<div class="content-2" id="divGranite">
<h2>Granite Purchase</h2>
<IFRAME  runat="server" id="frameGranite" src="Jobs-granite.aspx" width="820px" height="300px" frameborder="0" seamless  ></IFRAME>
</div>

Et mon code Javascript:

function refreshGranite() {           
   var iframe = document.getElementById('divGranite')
   iframe.innerHTML = iframe.innerHTML;
}

J'espère que cela t'aides.


Plusieurs erreurs dans cette réponse: 1. pas un composant ASP.NET, runat="server"n'est donc pas applicable; 2. Pourquoi tout en majuscules IFRAME? 3. les valeurs d'attribut de dimension n'ont pas d'unité; 4. frameborderest obsolète
Raptor

0

Vous devez utiliser

[0] .src

pour trouver la source de l'iframe et son URL doit être sur le même domaine du parent.

setInterval(refreshMe, 5000);
function refreshMe() {
    $("#currentElement")[0].src = $("#currentElement")[0].src;   
}

0

tu peux le faire comme ça

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });

-5

La solution ci-dessous fonctionnera à coup sûr:

window.parent.location.href = window.parent.location.href;
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.