Wie ändere ich den Inhalt eines Iframes mithilfe von jquery dynamisch?

Ich habe mich gefragt, ob es möglich ist, eine Site mit einem Iframe und einem Abfragecode zu haben, der den Iframe-Inhalt alle 30 Sekunden ändert. Der Inhalt befindet sich auf verschiedenen Webseiten.

Etwas wie das:

<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
quelle

Das Ende des Beitrags wird nicht angezeigt, aber es war einfaches HTML mit einem Iframe.

Audun

@Audun: Ich habe es für dich repariert. Markieren Sie beim nächsten Mal alles und verwenden Sie die Codetaste. Auch der Abstand ist cool.

Geowa4

Dinge wie http://webPage1.commüssen in Anführungszeichen stehen! //werde einen Kommentar abgeben!

Geowa4

Antworten:

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
quelle

Die [++ i% len] als Möglichkeit, das Array mit Recycling zu durchlaufen, ist brillant! Das hat mir ein neues Muster beigebracht! Vielen Dank!

Rhh

Beachten Sie, dass Sie in der Funktion setInterval nicht "$ (iframe)" verwenden müssen. sondern Sie können direkt "iframe". weil Sie bereits einige Zeilen oben iframe als jQuery-Objekt erstellt haben. Prost.

Mario Awad

Wie wäre es, wenn sich das eingestellte Intervall dynamisch ändern würde?

Yohanes AI

Verwenden Sie stattdessen setTimeout

Anatoliy

Wenn Sie nur ändern möchten, wohin der Iframe zeigt, und nicht den tatsächlichen Inhalt innerhalb des Iframes, müssen Sie nur das srcAttribut ändern .

 $("#myiframe").attr("src", "newwebpage.html");

Anthony
quelle

load () ist keine auf diese Weise verwendete jQuery-Funktion. Laden ist für AJAX

Hurda

Laden ist nicht für Ajax, bitte @Hurda siehe Dokumentation ( api.jquery.com/load-event ). Sie werden sehen, dass Laden verwendet wird, um eine Verbindung herzustellen, selbst wenn etwas geladen ist. Sie können Laden mit einem Bild verwenden. Aber ich muss Ihnen zustimmen, dass es auch in dem von Anthony vorgesehenen Fall nicht angemessen ist.

Patrick Desjardins

@Doak - Ich denke immer noch, dass er api.jquery.com/load ajax load erwähnt - es lädt einige Inhalte. Die eigentliche Methode wird anhand von Parametern ausgewählt - wir können uns also nicht sicher sein. Ich bin nur neugierig, warum Sie das Bedürfnis haben, mich nach 11 Monaten zu korrigieren?

Hurda

Nun, ich bin mir sicher, dass Sie beide Recht haben. Es ist so lange her, dass ich jquery berührt habe, dass ich mich nicht erinnern kann, was die Ladung bewirkt. Ich bin mir sicher, als ich vor 25 Monaten die Antwort schrieb, hatte ich den Eindruck, dass ich damit load()jedes Fenster oder Dokumentobjekt neu laden könnte. Wie gesagt, ich kann mich nicht mehr daran erinnern, was es tatsächlich tut. Ich denke, insgesamt habe ich versucht, eine Option vorzustellen, die einfach war und keine Verhandlungen über Richtlinien mit demselben Ursprung erforderte.

Anthony

Eigentlich finde ich es ziemlich lächerlich, Hurda anzunehmen, welche Methode ich meinte, da keiner von ihnen tatsächlich das erreichen würde, was ich vorgeschlagen hatte. Warum sollte ich denken, dass eine für Ajax bestimmte Methode einen Iframe genauso neu laden würde, wie ich denken würde, dass eine für Ereignisbindung bestimmte Methode ihn neu laden würde? Wenn überhaupt, habe ich wahrscheinlich an reines js gedacht und an die Art und Weise, wie Sie "onblah" zum Binden und "blah" zum Auslösen des Ereignisses verwenden. In beiden Fällen würde die Methode den Iframe nicht neu laden, daher habe ich meine Antwort bearbeitet.

Anthony

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
quelle