Recharger un iframe avec jQuery

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>

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.

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

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

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

avec jquery, vous pouvez utiliser ceci:

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

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

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

Voici une autre façon

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

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.

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.

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.

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

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

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

    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>

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.

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

tu peux le faire comme ça

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

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

window.parent.location.href = window.parent.location.href;