JS властивість Object.frames

Загальний опис

Властивість frames в JavaScript є частиною глобального об'єкту Window і відіграє ключову роль у взаємодії з фреймами (рамками) на веб-сторінці. Ця властивість повертає об'єкт типу Window, який містить всі фрейми (як <iframe> так і <frame>) поточної сторінки. Її основне призначення - забезпечити доступ до контенту та методів кожного фрейму на сторінці, що важливо для складних веб-додатків, які використовують фрейми для відображення різних частин контенту або для вбудовування контенту з інших джерел.

Практичне застосування frames

Для базового використання, припустимо, що на вашій веб-сторінці є кілька фреймів. Використовуючи window.frames, ви можете отримати доступ до кожного з них. Наприклад, window.frames[0] дасть вам доступ до першого фрейму на сторінці. Це дуже корисно, коли вам потрібно читати або змінювати вміст фреймів, контролювати їх поведінку або навіть реагувати на події в межах фрейму.

Деталізація використання

1. Доступ до фреймів: Ви можете доступатися до фреймів за індексом або ім'ям. Наприклад, якщо у вас є фрейм з ім'ям myFrame, ви можете отримати доступ до нього за допомогою window.frames['myFrame'].

2. Читання та зміна контенту фрейму: Ви можете читати або змінювати вміст фрейму, доступившись до його властивостей та методів. Наприклад, window.frames[0].document.body.innerHTML повертає HTML вміст тіла першого фрейму.

3. Взаємодія з фреймами: Ви можете викликати функції або змінювати властивості фреймів. Наприклад, window.frames[0].location.reload() перезавантажить перший фрейм.

Приклади коду

1. Перебір фреймів: Якщо вам потрібно виконати дію для кожного фрейму, ви можете використовувати цикл:

   for (let i = 0; i < window.frames.length; i++) {
     console.log(window.frames[i].location.href);
   }
   

   Цей код виводить адресу кожного фрейму на консоль.

2. Зміна вмісту фрейму: Щоб змінити вміст фрейму:

   window.frames['myFrame'].document.body.innerHTML = '<p>Новий контент</p>';
   

   Тут ми змінюємо HTML вміст фрейму myFrame.

правити

Порада

Використовуючи властивість frames, можна отримати доступ до конкретного фрейма за індексом. Це корисно, коли вам потрібно взаємодіяти з певним фреймом на сторінці. Наприклад, window.frames[0] дасть вам доступ до першого фрейма.

автор: Bond правити

Порада

Якщо вам потрібно виконати дії з кожним фреймом на сторінці, використовуйте цикл. Наприклад, for (let i = 0; i < window.frames.length; i++) { /* дії з window.frames[i] */ }. Це дозволяє застосувати одну й ту ж логіку до всіх фреймів.

автор: Bond правити

Порада

Ви можете динамічно змінювати вміст фрейму, використовуючи цю властивість. Наприклад, змінюючи src властивість фрейму, ви можете завантажити новий контент.

автор: Bond правити

Нотатка

Використання фреймів може бути складним з точки зору доступності та SEO, тому важливо розуміти потенційні наслідки їх застосування.

автор: Bond правити

Нотатка

При роботі з фреймами важливо пам'ятати про політику одного джерела (same-origin policy), яка обмежує доступ до фреймів з інших доменів. Спроба доступу до фрейма з іншого домену може викликати проблеми безпеки.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Window: frames property

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	≤12.1	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	—

Приклади

+ запропонувати свій приклад у пісочниці

<iframe srcdoc="Старий вміст" width="300" height="60" title="Демо-фрейм"></iframe>

// window.frames[0] — перше вбудоване вікно (iframe)
var frame = window.frames[0];

// фрейм того самого походження — його документ доступний
frame.addEventListener('load', () => {});

setTimeout(() => {
    try {
        frame.document.body.innerHTML = 'Це новий вміст фрейму.';
        console.log('Вміст фрейму замінено');
    } catch (error) {
        console.log('Фрейм з іншого походження:', error.name);
    }
}, 300);

// Отримуємо кількість фреймів на сторінці
var frameCount = window.frames.length;

// Перебираємо всі фрейми і виводимо їх заголовки
for (var i = 0; i < frameCount; i++) {
    var frame = window.frames[i];
    var frameTitle = frame.document.title;
    console.log("Заголовок фрейму " + i + ": " + frameTitle);
}