Як динамічно змінювати вміст у фреймі за допомогою 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 із вставкою.

— Аудун,

@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 за кілька рядків вище. На ура

— Маріо Авад,

Як бути, якщо інтервал, налаштований динамічно змінюється?

— Йоханес А.І.

Замість цього використовуйте setTimeout

— Анатолій

Якщо ви просто хочете змінити, куди вказує iframe, а не фактичний вміст усередині iframe, вам просто потрібно буде змінити srcатрибут.

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

— Антоній
джерело

load () не є функцією jQuery, що використовується таким чином. Вантаж для AJAX

— Hurda

Завантаження не для Ajax, будь ласка, зверніться до @Hurda до документації ( api.jquery.com/load-event ) Ви побачите, що Load використовується для підключення навіть коли щось завантажується. Ви можете використовувати Load з зображенням. Але я повинен погодитися з вами, що це не підходить і у випадку, який Ентоні передбачає.

— Patrick Desjardins

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

— Hurda

Ну, я впевнений, між вами двома, ви обидва праві. Минуло стільки часу, як я торкнувся jquery, я не можу згадати, що робить навантаження. Я впевнений, що коли я писав відповідь 25 місяців тому, у мене було таке враженняload() його можна використати для перезавантаження будь-якого вікна чи об’єкта документа. Як я вже сказав, я вже не можу згадати, що це насправді робить. Я думаю, що загалом я намагався представити варіант, який був простим і не вимагав переговорів щодо політики того самого походження.

— Ентоні

Насправді, я вважаю досить смішним Хурда припускати, який метод я мав на увазі, оскільки жоден з них насправді не досяг би того, що я передбачав. Чому б я думав, що метод, призначений для ajax, перезавантажує iframe не більше, ніж я вважаю, що метод, призначений для прив'язки подій, перезавантажить його? Якщо що, я, мабуть, думав про чистий js і про те, як ви використовуєте "onblah" для прив'язки та "bla" для запуску події. У будь-якому випадку, метод не перезавантажує 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
джерело