Comment modifier dynamiquement le contenu d'une iframe à l'aide de jquery?

89

Je me demandais s'il était possible d'avoir un site avec un iframe et du code jquery qui modifie le contenu iframe toutes les 30 secondes. Le contenu se trouve dans différentes pages Web.

Quelque chose comme ça:

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
      $(document).ready(function(){
        var array = new array();
        array[0] = 'http://webPage1.com';
        array[1] = 'http://webPage2.com';
        // And so on.
        // Do something here to change the iframe every 30 second
      });
    </script>
  </head>
  <body>
    <iframe id="frame"></iframe>
  </body>
</html>
jquery iframe Audun
la source
Le bas de l'article n'est pas affiché, mais c'était du HTML de base avec une iframe.
Audun
@Audun: je l'ai réparé pour vous; la prochaine fois, mettez tout en surbrillance et utilisez le bouton de code. De plus, l'espacement est cool.
geowa4
des choses comme http://webPage1.comdoivent être entre guillemets! //fera un commentaire!
geowa4

Réponses:

135 
<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
      $(document).ready(function(){
        var locations = ["http://webPage1.com", "http://webPage2.com"];
        var len = locations.length;
        var iframe = $('#frame');
        var i = 0;
        setInterval(function () {
            iframe.attr('src', locations[++i % len]);
        }, 30000);
      });
    </script>
  </head>
  <body>
    <iframe id="frame"></iframe>
  </body>
</html>
Anatoliy
la source
17
Le [++ i% len] comme moyen d'itérer dans le tableau avec recyclage est génial! Cela m'a appris un nouveau modèle! Merci!
rhh
8
Notez qu'à l'intérieur de la fonction setInterval, vous n'avez pas besoin d'utiliser "$ (iframe)". mais plutôt vous pouvez directement «iframe». car vous avez déjà créé iframe en tant qu'objet jQuery quelques lignes ci-dessus. À votre santé.
Mario Awad
Et si l'intervalle configuré changeait dynamiquement?
Yohanes AI
Utilisez plutôt setTimeout
Anatoliy
8

Si vous souhaitez simplement changer l'endroit où pointe l'iframe et non le contenu réel à l'intérieur de l'iframe, il vous suffit de changer l' srcattribut.

 $("#myiframe").attr("src", "newwebpage.html");
Anthony
la source
2
load () n'est pas une fonction jQuery utilisée de cette manière. La charge est pour AJAX
Hurda
Load n'est pas pour Ajax, veuillez @Hurda se référer à la documentation ( api.jquery.com/load-event ) Vous verrez que Load est utilisé pour accrocher un même quand quelque chose est fini de charger. Vous pouvez utiliser Load avec une image. Mais, je dois être d'accord avec vous que ce n'est pas non plus approprié dans le cas qu'Anthony fournit.
Patrick Desjardins
@Doak - Je pense toujours qu'il ment api.jquery.com/load ajax load - il charge du contenu. La méthode réelle est choisie en fonction des paramètres - nous ne pouvons donc pas en être sûrs. Je suis juste curieux de savoir pourquoi vous ressentez le besoin d'essayer de me corriger après 11 mois?
Hurda
Eh bien, je suis sûr qu'entre vous deux, vous avez tous les deux raison. Cela fait si longtemps que je n'ai pas touché à jquery, je ne me souviens plus de ce que fait load. Je suis sûr que lorsque j'ai écrit la réponse il y a 25 mois, j'avais l'impression qu'il load()pouvait être utilisé pour recharger n'importe quelle fenêtre ou objet de document. Comme je l'ai dit, je ne me souviens plus de ce que ça fait réellement. Je pense que dans l'ensemble, j'essayais de présenter une option qui était simple et ne nécessitait pas de négocier des politiques de même origine.
Anthony
En fait, je pense que c'est assez ridicule Hurda de supposer quelle méthode je voulais dire, car aucun d'eux n'accomplirait réellement ce que je suggérais. Pourquoi penserais-je qu'une méthode destinée à ajax rechargerait une iframe pas plus que je ne penserais qu'une méthode destinée à la liaison d'événements la rechargerait? Si quoi que ce soit, je pensais probablement aux js purs et à la façon dont vous utilisez "onblah" pour la liaison et "blah" pour déclencher l'événement. Quoi qu'il en soit, la méthode ne rechargerait pas l'iframe, j'ai donc modifié ma réponse.
Anthony
4 
var handle = setInterval(changeIframe, 30000);
var sites = ["google.com", "yahoo.com"];
var index = 0;

function changeIframe() {
  $('#frame')[0].src = sites[index++];
  index = index >= sites.length ? 0 : index;
}
geowa4
la source