web-dev-qa-db-fra.com

Recharger une iframe avec jQuery

J'ai deux iframes sur une page et l'un apporte des modifications à l'autre, mais l'autre iframe n'affiche pas les modifications avant l'actualisation. 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>
javascriptjqueryhtmliframe
137
Matt Elhotiby

Si l'iframe ne se trouvait pas sur un autre domaine, vous pourriez faire quelque chose comme ceci:

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

Mais comme l'iframe se trouve sur un autre domaine, l'accès à la propriété contentDocument de l'iframe sera refusé par la règle same-Origin policy .

Mais vous pouvez forcer de force le iframe interdomaine à se recharger si votre code s'exécute sur la page parent de l'iframe, en définissant l'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'un autre iframe, vous n'avez aucune chance, que n'est pas possible.

164
Alex
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });
222
Šime Vidas

vous pouvez aussi utiliser jquery. C’est la même chose que Alex a proposé d’utiliser JQuery:

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

Recharger une iframe avec jQuery

faire un lien dans l'iframe permet de dire avec id = "reload" puis utilisez le code suivant

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

et vous êtes bon pour aller avec tous les navigateurs.

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

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

il suffit de faire une ancre dans 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 des paramètres envoyés à votre iframe, procédez comme suit.

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

n'avez pas besoin de l'URL de la page car -> target = "_ SELF" faites-le pour vous

9
user1008545

avec jQuery, vous pouvez utiliser ceci:

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

Réciproquant la réponse d'Alex mais avec jQuery

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

Je suis à peu près sûr que tous les exemples ci-dessus ne rechargent que l'iframe avec sa source 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.

3
Mark

Voici un autre moyen

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

Réciproquant 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 ça aide.

2
Akm16
$('IFRAME#currentElement').get(0).contentDocument.location.reload()
2
Pavel

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

Couru dans ce problème en construisant manuellement les iframes de bouton Twitter, qui ne s'actualisaient pas lorsque j'ai mis à jour les URL.

Les boutons Twitter ressemblent à 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é le code source, et les cibles des boutons 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 tentait spécifiquement d'activer la mise en cache.

Pour recharger quelque chose qui ne change qu'avec des balises hash, vous devez supprimer l'élément, ou modifier la variable src, attendre que le thread se ferme, puis le réaffecter. Si la page est toujours mise en cache, cela ne devrait pas nécessiter un hit sur le réseau, mais déclencher le rechargement des images.

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

Update : 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 Précédent () de fonctionner comme prévu. Aussi bien de ne pas avoir la minuterie.

2
greg.kindel

Ceci est possible avec JavaScript simple.

  • Dans iFrame1, créez une fonction JavaScript appelée dans la balise body onload. Je le vérifie pour une variable côté serveur que j'ai définie, de sorte qu'il n'essaie pas d'exécuter la fonction JavaScript dans iframe2 sauf si j'ai déjà effectué 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 accède à la page parent, puis utilise la syntaxe window.frames pour activer une fonction JavaScript dans iframe2. Assurez-vous d’utiliser la variable id/name de iframe2 et non la variable 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
Keith Pastorek

Résolu! Je m'inscris à stockoverflow juste pour partager avec vous la seule solution qui fonctionne (du moins dans ASP.NET/IE/FF/Chrome)! L'idée est de remplacer la valeur innerHTML d'une 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.

0
hubert17

tu peux le faire comme ça

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });
0
aitbella
    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

la solution inter-navigateur est:

    ifrX.src = ifrX.contentWindow.location

c'est utile surtout quand <iframe> est la cible d'un <form>

0
bortunac

// 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
wesley7

Vous devez utiliser 

[0] .src

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

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