Как мне динамически изменять содержимое в iframe с помощью jquery?

Мне было интересно, можно ли иметь сайт с iframe и некоторым кодом jquery, который меняет содержимое iframe каждые 30 секунд. Контент находится на разных веб-страницах.

Что-то вроде этого:

<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

— Аудун
источник

Нижняя часть сообщения не отображается, но это был базовый HTML-код с iframe.

— Audun

@Audun: я исправил это для вас; в следующий раз выделите все и используйте кнопку кода. Кроме того, интервалы - это круто.

— geowa4,

такие вещи как http://webPage1.comнужно заключать в кавычки! //сделаю комментарий!

— geowa4

Ответы:

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". Потому что вы уже создали iframe как объект jQuery несколькими строками выше. Ура.

— Марио Авад

Как если бы интервал настройки менялся динамически?

— Yohanes AI

Вместо этого используйте setTimeout

— Анатолий

Если вы просто хотите изменить место, на которое указывает iframe, а не фактическое содержимое внутри iframe, вам просто нужно изменить srcатрибут.

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

— Энтони
источник

load () не является функцией jQuery, используемой таким образом. Загрузка для AJAX

— Hurda

Load не для Ajax, пожалуйста, @Hurda обратитесь к документации ( api.jquery.com/load-event ). Вы увидите, что Load используется для перехвата, даже когда что-то уже загружено. Вы можете использовать Load с изображением. Но я должен согласиться с вами, что это неуместно и в случае, который предоставляет Энтони.

— Патрик Дежарден,

@Doak - я все еще думаю, что он имеет в виду api.jquery.com/load ajax load - он загружает некоторый контент. Фактический метод выбирается на основе параметров, поэтому мы не можем быть уверены. Мне просто любопытно, почему вы чувствуете необходимость попытаться исправить меня через 11 месяцев?

— Hurda

Что ж, я уверен, что вы оба правы. Я так давно не касался jquery, что не могу вспомнить, что делает load. Я уверен, что когда я писал ответ 25 месяцев назад, у меня создалось впечатление, что load()его можно использовать для перезагрузки любого окна или объекта документа. Как я уже сказал, я больше не могу вспомнить, что он на самом деле делал. Я думаю, что в целом я пытался представить вариант, который был простым и не требовал согласования политик одинакового происхождения.

— Энтони

На самом деле, я думаю, Хурда довольно нелепо предполагать, какой метод я имел в виду, поскольку ни один из них на самом деле не достигнет того, что я предполагал. Почему я мог думать, что метод, предназначенный для ajax, перезагружает iframe не больше, чем я думал, что метод, предназначенный для привязки событий, перезагружает его? Во всяком случае, я, вероятно, думал о чистом js и о том, как вы используете «onblah» для привязки и «blah» для запуска события. В любом случае метод не перезагружал iframe, поэтому я отредактировал свой ответ.

— Энтони

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
источник