как вызвать функцию родительского окна из iframe в javascript
Вызов функции родительского окна из 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>
Использование postMessage при нарушении политики одного источника
Если 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>
Заключение
Таким образом, вызов функции родительского окна из iframe может быть реализован несколькими способами в зависимости от политики безопасности. Если у вас есть доступ к родительскому окну, используй window.parent. В противном случае стоит обратить внимание на postMessage, который обеспечивает безопасный обмен данными между окнами с разных источников.
