как вызвать функцию родительского окна из iframe в javascript

год назад

Nikolai Gagarinov

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Вызов функции родительского окна из iframe в JavaScript можно реализовать через объект window.parent. Вот пошаговое объяснение процесса:

Когда мы говорим о вызове функции из iframe, это значит, что код, исполняемый в iframe, должен взаимодействовать с кодом, исполняемым в родительском окне.
Важно учитывать политику одинакового источника (Same-Origin Policy). Это ограничение браузеров на доступ к ресурсам, находящимся на других источниках. Если родительское окно и iframe загружаются с одного и того же домена, протокола и порта, вы можете свободно взаимодействовать с функциями одного контекста из другого. В противном случае потребуется другой подход (например, работа с postMessage).
Если доступ к родительскому окну разрешен, вы можете вызвать функцию следующим образом:

Пример:

В родительском окне определите функцию, которую хотите вызвать:

<!-- Родительское окно (parent.html) -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Родительское окно</title>
    <script>
        function greet() {
            alert("Привет из родительского окна!");
        }
    </script>
</head>
<body>
    <h1>Это родительское окно</h1>
    <iframe src="iframe.html"></iframe>
</body>
</html>

В iframe вы можете вызвать эту функцию так:

<!-- Iframe (iframe.html) -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Iframe</title>
    <script>
        function callParentFunction() {
            window.parent.greet(); // Вызов функции родительского окна
        }

        window.onload = function() {
            callParentFunction(); // Вызываем функцию при загрузке iframe
        };
    </script>
</head>
<body>
    <h1>Это iframe</h1>
</body>
</html>

Если iframe и родительское окно находятся на разных источниках, использование postMessage — это безопасный способ взаимодействия:

Родительское окно:

<!-- Родительское окно (parent.html) -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Родительское окно</title>
    <script>
        window.addEventListener("message", function(event) {
            if (event.origin !== "https://example.com") return; // Проверка источника
            if (event.data === "greet") {
                alert("Привет из родительского окна!");
            }
        }, false);
    </script>
</head>
<body>
    <h1>Это родительское окно</h1>
    <iframe src="https://example.com/iframe.html"></iframe>
</body>
</html>

Iframe:

<!-- Iframe (iframe.html) -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Iframe</title>
    <script>
        function notifyParent() {
            window.parent.postMessage("greet", "https://your-parent-domain.com"); // Указываем правильный домен родителя
        }

        window.onload = function() {
            notifyParent(); // Вызываем notifyParent при загрузке iframe
        };
    </script>
</head>
<body>
    <h1>Это iframe</h1>
</body>
</html>

9 месяцев назад

Ivan Gagarinov

1 месяц

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

2 месяца

ООП на Javascript

Навык глубокого понимания архитектуры и написания чистого кода, позволяющий решать сложные задачи

1 месяц

Асинхронное программирование на JS

Навык асинхронного программирования в JavaScript: писать быстрый код, расти в грейде и успешно проходить собеседования.

8 месяцев

Автоматизатор тестирования на JavaScript

Git, JavaScript, Playwright, бэкенд-тесты, юнит-тесты, API-тесты, UI-тесты, Github Actions, HTTP/HTTPS, API, Docker, SQL

Похожие вопросы