jqueryを使用してiframeのコンテンツを動的に変更するにはどうすればよいですか？

30秒ごとにiframeのコンテンツを変更するiframeといくつかのjqueryコードを含むサイトを作成することが可能かどうか疑問に思っていました。コンテンツは別のWebページにあります。

このようなもの：

<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

— オーダン
ソース

投稿の下部は表示されていませんが、iframeを使用した基本的なhtmlでした。

— Audun、

@Audun：私はあなたのためにそれを修正しました。次回は、すべてを強調表示して、コードボタンを使用します。また、間隔はクールです。

— geowa4 2009年

のようなものhttp://webPage1.comは引用符で囲む必要があります！//コメントします！

— geowa4 2009年

回答:

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>

— アナトリー
ソース

[++ i％len]は、リサイクルでアレイを反復処理する方法として素晴らしいです。それは私に新しいパターンを教えてくれました！ありがとう！

— rhh

setInterval関数内では、「$（iframe）」を使用する必要がないことに注意してください。むしろ、直接「iframe」することができます。数行上のjQueryオブジェクトとしてiframeをすでに作成しているためです。乾杯。

— Mario Awad、2012

間隔設定が動的に変更された場合はどうなりますか？

— ヨハネスAI 2017

代わりにsetTimeoutを使用してください

— Anatoliy 2017年

iframe内の実際のコンテンツではなく、iframeが指す場所を変更するだけの場合は、src属性を変更するだけで済みます。

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

— アンソニー
ソース

load（）は、この方法で使用されるjQuery関数ではありません。ロードはAJAX用

— Hurda

LoadはAjax用ではありません。@ Hurdaがドキュメント（api.jquery.com/load-event）を参照してください。何かが読み込まれた場合でも、Loadを使用してをフックすることがわかります。画像でLoadを使用できます。しかし、Anthonyが提供する場合にも、それは適切ではないことを私はあなたに同意する必要があります。

— Patrick Desjardins

@Doak-私はまだapi.jquery.com/load ajax loadを認識していると思います-一部のコンテンツをロードします。実際の方法はパラメーターに基づいて選択されるため、確信が持てません。11か月後に私を是正する必要があると感じたのはなぜですか。

— Hurda

まあ、私はあなたの2人の間、あなたの両方が正しいと確信しています。jqueryに触れてから久しぶりに、どのようなロードが行われるか思い出せません。25か月前に回答を書いたときload()、ウィンドウやドキュメントオブジェクトを再読み込みするために使用できるような印象を受けていたと思います。私が言ったように、私はそれが実際に何をしているのかもう思い出せません。全体的に、私はシンプルで、同じ起源のポリシーを交渉する必要がないオプションを提示しようとしていたと思います。

— Anthony

実際、どちらの方法も私が提案していたことを実際に達成することはないので、私がどの方法を意味するかを推測するのはかなりばかげたハルダだと思います。イベントバインディング用のメソッドがiframeをリロードすると思うよりも、ajax用のメソッドがiframeをリロードすると思うのはなぜですか？どちらかと言えば、私はおそらく純粋なjsと、バインディングに「onblah」を使用してイベントを起動する「blah」を使用する方法を考えていたでしょう。どちらの方法でも、メソッドはiframeをリロードしないため、回答を編集しました。

— 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
ソース