css.in.ua
Підтримати

Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

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

Також, підтримуйте нас матеріально.

Підтримати матеріально

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 для динамічного визначення контексту виконання. Наприклад, ви можете управляти кодом, який виконується на верхньому рівні вікна та у вкладених фреймах.

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

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

const myLink = document.createElement(`a`);
myLink.href = `https://example.com`;
myLink.target = `self`;
Порада:

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

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

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

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

Синтаксис

window.self

Значення

Return

Переглядачі

Переглядач

1

1

3

12.1

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі ми використовуємо властивість window.self для перевірки, чи поточне вікно є верхнім вікном (window.top). Це корисно для сценаріїв, коли потрібно переконатися, що вміст не відображається у фреймі або в iframe.

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

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

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

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

Документи

Зв'язок