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

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

self - це властивість об'єкта Window у мові програмування JavaScript. Ця властивість визначає посилання на поточний об'єкт, яке може бути корисним в різних сценаріях програмування. В основному, self використовується для звернення до поточного вікна чи фрейму, і вона може бути використана для отримання доступу до властивостей та методів об'єкта Window.

Використання self може бути корисним у випадках, коли розробнику необхідно звертатися до об'єкта Window, але йому не важливо, чи це вікно чи фрейм. Це забезпечує універсальність коду в різних сценаріях, де можуть бути використані різні вікна чи фрейми.

Приклад використання:

// Отримання URL поточної сторінки через self
const currentURL = self.location.href;
console.log(currentURL); // Виведе URL поточної сторінки

// Зміна розміру вікна за допомогою self
self.resizeTo(800, 600);

У цьому прикладі self використовується для отримання URL поточної сторінки та зміни розміру вікна. Це може бути корисно, наприклад, при необхідності здійснення динамічних змін у вікні без прив'язки до конкретного елемента.

Робота з фреймами:

// Отримання фрейму за допомогою self
const frame = self.frames[0];

// Зміна URL фрейму
frame.location.href = 'newpage.html';

У випадках, коли на сторінці використовуються фрейми, self може бути корисним для роботи з ними. У вищеприведеному прикладі self.frames[0] дозволяє отримати доступ до першого фрейму на сторінці та змінити його URL.

Використання self може спрощувати код, особливо в ситуаціях, де важко визначити, яке саме вікно або фрейм є поточним. Враховуючи його універсальність, розробники можуть створювати більш гнучкий та масштабований код, який може легко адаптуватися до різних умов та вимог веб-додатків.

правити

Порада

Використовуйте self для однорідного доступу до вікна навіть у вкладених фреймах. Це забезпечить стабільну інтеракцію у всіх частинах вашої веб-сторінки.

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

Порада

Використовуйте self для динамічного визначення контексту виконання. Наприклад, ви можете управляти кодом, який виконується на верхньому рівні вікна та у вкладених фреймах.

if (`self` === `top`) {
   // Ваш код для верхнього рівня вікна
} else {
   // Ваш код для вкладеного фрейма
}

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

Порада

Використовуйте self при створенні посилань, щоб забезпечити переносимість вашого коду між різними частинами вашого проекту.

const myLink = document.createElement(`a`);
myLink.href = `https://example.com`;
myLink.target = `self`;

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

Порада

Уникайте використання self для прямого впливу на стилі. Звертайте увагу, що це властивість для роботи з контекстом вікон, а не CSS. Використовуйте document.body для зміни стилів на рівні вікна.

// Уникайте:
self.style.color = `red`;

// Замість цього:
document.body.style.color = `red`;

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

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

Синтаксис

window.self

Переглядачі

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

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

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

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

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

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

Переглядач
	1.0

Приклади

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

function safeRedirect(url) {
  if (window.self === window.top) {
    window.location = url;
  } else {
    console.log("Редирект заблоковано, оскільки це не верхнє вікно");
  }
}

// Використання функції
safeRedirect("https://example.com");

if (window.self === window.top) {
  console.log("Це верхнє вікно, не iframe або фрейм.");
} else {
  console.log("Це iframe або фрейм.");
}