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

Я сделал страницу, загружаемую в IFrame, и ей нужно вызвать функцию на родительской странице после завершения загрузки.

Он работает локально в разработке (в том же домене), но в реальном мире он размещается в совершенно другом домене, поэтому, очевидно, я сталкиваюсь с проблемами Cross-domain, то есть:

Небезопасный JavaScript пытается получить доступ к фрейму с URL http://[...] site1.com из фрейма с URL http://[...] site2.com/iframe. Домены, протоколы и порты должны соответствовать.

Я управляю обоими серверами, так что можно ли разместить что-то на одном или обоих серверах, где говорится, что им разрешено разговаривать друг с другом?

Я посмотрел настройку "document.domain" как на странице Iframe, так и на родительской странице.

Я экспериментировал с настройкой заголовка Access Control:

header ('Access-Control-Allow-Origin: *');

Но ни одна из них не работает.

Есть ли способ разрешить iframe, вызывающий функцию в окне Parent в совершенно другом домене, когда я управляю обоими серверами?

Ответ 1

Вы можете связываться между фреймами через API сообщений.

Например, в дочернем фрейме вы можете позвонить:

parent.postMessage("child frame", "*");

И в родительском кадре зарегистрируйте обработчик сообщений:

window.addEventListener("message", function(event) {
    console.log("Hello from " + event.data);
});

Ответ 2

Здесь есть несколько вариантов: http://softwareas.com/cross-domain-communication-with-iframes

Ответ 3

Эта проблема может быть легко решена с помощью перезаписи .htaccess.

Демо:

а. Создайте каталог с именем "iframeContent/" на сервере SERVER 1.

В. Поместите в этот каталог файл с именем index.php, содержащий:

<html> 
<head></head> 
<body>

<script type="text/javascript">

    parent.check();

</script>

</body> 
</html>

Это содержимое iFrame. Он вызовет функцию в родительском.

С. Создайте каталог с именем "iframeTesting_without-htaccess/" на сервере SERVER 2.

Д. Поместите в этот каталог файл с именем index.php, содержащий:

<html> 
<head></head> 
<body>

<script type="text/javascript">

    function check() { 

       alert("hello");

    }

</script>

<iframe id="sidebnrId" name="sidebnr"
src="PATH-ON-SERVER-1/iframeContent/" frameborder="0"
height="500px" width="600px" scrolling="no"></iframe>

</script>

</body> 
</html>

Это просто содержимое родительских окон. Просто обратите внимание, что содержимое iFrame находится на другом сервере (потому что на сервере 1).

Е. Доступ к "PATH-ON-SERVER-2/iframeTesting_without-htaccess/" с помощью веб-браузера → ничего не происходит: iframe не имеет доступа к функции своего родителя.

ЗДЕСЬ КАК ВЫ РЕШИТЕ ПРОБЛЕМУ

F. Создайте еще один каталог с именем "iframeTesting_with-htaccess/" на сервере SERVER 2.

G. Поместите в этот каталог файл с именем index.php, содержащий:

<html> 
<head></head> 
<body>

<script type="text/javascript">

    function check() { 

       alert("hello");

    }

</script>

<iframe id="sidebnrId" name="sidebnr"
src="content-iframe/" frameborder="0"
height="500px" width="600px" scrolling="no"></iframe>

</script>

</body> 
</html>

В этот раз iFrame больше не указывает на содержимое на сервере SERVER 1, а на промежуточную фиктивную директорию "content-iframe/", расположенную на том же сервере (SERVER 2).

Н. Поместите в этот каталог файл .htaccess, содержащий:

Options +FollowSymLinks
RewriteEngine On

RewriteBase /

RewriteRule ^content-iframe/$ PATH-ON-SERVER-1/iframeContent/ [R,NC,P]

Роль этого файла заключается в перенаправлении любого доступа к фиктивной директории в контент на сервере SERVER 1.

я. Повторите попытку, войдите в "PATH-ON-SERVER-2/iframeTesting_with-htaccess/" с помощью веб-браузера. На этот раз это сработает. Надеюсь, это помогло: -)

Ответ 4

В современных браузерах вы можете использовать window.postMessage() для связи между сотрудничающими фреймами в разных доменах. Вы не можете вызвать функцию напрямую, но вы можете передавать данные или сообщения между ними. См. Описание в MDN.