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

89

Мне было интересно, можно ли иметь сайт с 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>
Анатолий
источник
17
[++ i% len] как способ перебора массива с повторным использованием - великолепен! Это научило меня новому образцу! Благодарность!
rhh
8
Обратите внимание, что внутри функции setInterval вам не нужно использовать «$ (iframe)». а можно прямо "iframe". Потому что вы уже создали iframe как объект jQuery несколькими строками выше. Ура.
Марио Авад
Как если бы интервал настройки менялся динамически?
Yohanes AI
Вместо этого используйте setTimeout
Анатолий
8

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

 $("#myiframe").attr("src", "newwebpage.html");
Энтони
источник
2
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, поэтому я отредактировал свой ответ.
Энтони
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
источник