JS властивість Window.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

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

Переглядач
	—

Приклади

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

<header>
    <h2 class="title">Window.frames Property</h2>
    <p class="description">Ця властивість дозволяє отримати доступ до фреймів на сторінці.</p>
</header>
<main>
    <button id="addFrameButton">Додати фрейм</button>
    <div class="result">
        <iframe srcdoc="<p style='font:14px sans-serif'>Вбудований документ №1</p>" width="300" height="200" title="Перший фрейм"></iframe>
    </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  margin-bottom: 10px;
}

document.addEventListener("DOMContentLoaded", function () {
  var addFrameButton = document.getElementById("addFrameButton");
  var resultDiv = document.querySelector(".result");

  addFrameButton.addEventListener("click", function () {
    // Створюємо новий фрейм і додаємо його до результату
    var newFrame = document.createElement("iframe");
    newFrame.srcdoc = "<p style='font:14px sans-serif'>Ще один вбудований документ</p>";
    newFrame.width = 300;
    newFrame.height = 200;
    resultDiv.appendChild(newFrame);
  });
});
//# sourceURL=pen.js

<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);
}