Parent JS - The Ultimate JavaScript Guide for Parents

Parent.js - это файл скрипта на языке JavaScript, который выполняется в контексте родительской страницы (главного окна браузера) и управляет ее поведением.

В контексте браузера, parent.js относится к скрипту, запущенному из фрейма или всплывающего окна и имеет доступ к родительскому окну (parent window). Это позволяет взаимодействовать между фреймами или окнами страницы.

Пример 1: Обмен данными между родительским окном и фреймом

В html:

html



    


    
Parent Frame
    
    

В child.html:

html



    


    
Child Frame
    Send Message to Parent
    

В parent.js:

javascript
// Получаем ссылку на iframe по его id
var childFrame = document.getElementById('childFrame');
// Определяем функцию для обработки сообщений от дочернего фрейма
function receiveMessageFromChild(event) {
    console.log('Received message from child frame:', event.data);
}
// Добавляем обработчик события для приема сообщений от фрейма
window.addEventListener('message', receiveMessageFromChild, false);
// Определяем функцию для отправки сообщений дочернему фрейму
function sendMessageToChild() {
    // Отправляем сообщение в дочерний фрейм
    childFrame.contentWindow.postMessage('Hello from parent!', '*');
}
// Вызываем функцию отправки сообщения при загрузке родительской страницы
window.onload = sendMessageToChild;

В child.js:

javascript
// Определяем функцию для обработки сообщений от родительского окна
function receiveMessageFromParent(event) {
    console.log('Received message from parent:', event.data);
}
// Добавляем обработчик события для приема сообщений от родительского окна
window.addEventListener('message', receiveMessageFromParent, false);
// Определяем функцию для отправки сообщений родительскому окну
function sendMessageToParent() {
    // Отправляем сообщение в родительское окно
    window.parent.postMessage('Hello from child!', '*');
}

В этом примере, когда страница загружается, родительский скрипт parent.js находит iframe с id "childFrame" и получает доступ к нему. Затем он определяет функцию receiveMessageFromChild для обработки сообщений, полученных от дочерней страницы. Чтобы установить связь с дочерней страницей, родительская страница отправляет сообщение "Hello from parent!" через функцию пост сообщений. Дочерний скрипт child.js также определяет функцию receiveMessageFromParent для обработки сообщений, полученных от родительского окна. Он отправляет сообщение "Hello from child!" обратно в родительское окно при нажатии кнопки "Send Message to Parent".

Пример 2: Обращение к родительскому окну из фрейма или всплывающего окна

В html:

html



    


    
Parent Window
    Open Child Window
    

В parent.js:

javascript
// Определяем функцию для обновления заголовка родительского окна
function updateParentTitle() {
    // Обновляем заголовок родительского окна
    window.opener.document.title = 'Updated Parent Title';
}
// Определяем функцию для закрытия дочернего окна
function closeChildWindow() {
    // Закрываем текущее окно
    window.close();
}
// Определяем функцию для открытия дочернего окна
function openChildWindow() {
    // Открываем новое окно
    var childWindow = window.open('child.html', 'Child Window', 'width=400,height=300');
    // Ожидаем закрытия дочернего окна
    childWindow.addEventListener('beforeunload', function(event) {
        console.log('Child window is closed');
    });
}

В child.html:

html



    


    
Child Window
    Update Parent Title
    Close Child Window
    

В child.js:

javascript
// Определяем функцию для обновления заголовка родительского окна
function updateParentTitle() {
    // Обновляем заголовок родительского окна
    window.opener.document.title = 'Updated Parent Title';
}
// Определяем функцию для закрытия дочернего окна
function closeChildWindow() {
    // Закрываем текущее окно
    window.close();
}

В этом примере, когда кнопка "Open Child Window" нажимается, родительский скрипт parent.js открывает новое окно с помощью функции window.open. В дочернем окне child.html, кнопка "Update Parent Title" вызывает функцию updateParentTitle, которая обновляет заголовок родительского окна с помощью свойства window.opener.document.title. Кнопка "Close Child Window" вызывает функцию closeChildWindow, которая закрывает текущее дочернее окно с помощью метода window.close.

Таким образом, parent.js - это скрипт на языке JavaScript, который выполняется в контексте родительской страницы и позволяет взаимодействовать между фреймами или окнами страницы, обмениваться данными и управлять их поведением.