Логотип Хекслета
/
Вопросы и ответы
/
JavaScript
/

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

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

JavaScript
JS

год назад

Nikolai Gagarinov

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

Ответы

0

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

  1. Когда мы говорим о вызове функции из iframe, это значит, что код, исполняемый в iframe, должен взаимодействовать с кодом, исполняемым в родительском окне.

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

  3. Если доступ к родительскому окну разрешен, вы можете вызвать функцию следующим образом:

Пример:

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

<!-- Родительское окно (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>

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

Ivan Gagarinov

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