JavaScript: Взаимодействие Iframe с не родным доменом
Дата последнего изменения: 23 Ноября 2009
Метки статьи: Готовые решения, HTML, JavaScript, © Авторское
Метки статьи: Готовые решения, HTML, JavaScript, © Авторское
Сегодня была нетривиальная задача. На HTML-странице находится IFRAME, который грузится с постороннего домена. Надо было при клике внутри iframe отработать javascript, расположенный на родительской странице.
Казалось бы, что тут сложного:
Но не тут-то было. Согласно браузерной политики безопасности, из iframe и frame запрещен доступ не только к cookie, но и к любым родительским элементам, если домены не одинаковы.
Казалось бы всё, тупик... Но после не продолжительного мозгового штурма я придумал простое до гениальности решение. Дело в том, что никто не мешает из iframe менять location.href родительской страницы. А что б страница не перезагружалась, задействуем якори.
Вот что в итоге получилось:
Родительская страница, загружаемая из http://domain1.org/
Подготовка выполнена: на родительской странице раз в секунду запускается скрипт check_anchor, который проверяет есть ли якоря в ссылке, по которой загружена родительская страница. Если якорь обнаружен, то его имя проверяется с текущими правилами, в данном случае с правилом для my_script.
Проверить работу скрипта не трудно: после загрузки родительской страницы добавьте в адресе якорь #my_script и нажмите <Enter>, после чего появится alert "Ok"
Теперь осталось в iframe-страницу добавить метод, который будет отсылать якоря родителю. Это самое легкое :)
Единственное ограничение, которое идет от политики безопасности браузера, нельзя в iframe считать ссылку, по которой была загружена родительская страница. Т.е. вот такой номер не пройдет:
Но это относительное неудобство, так как при формировании и отдаче iframe-страницы не трудно узнать откуда она была вызвана из переменной HTTP_REFERER, и, соответственно, подставить её значение в скрипт
Ну а для двухстороннего общения Родитель ⇔ IFRAME разместите код "приемника" на странице Iframe, а код "передатчика" на стороне родителя, только не забудьте в "передатчике" вместо top поставить имя iframe-окна
Казалось бы, что тут сложного:
<input type="button" onclick="top.my_script();" value="test">
Но не тут-то было. Согласно браузерной политики безопасности, из iframe и frame запрещен доступ не только к cookie, но и к любым родительским элементам, если домены не одинаковы.
Казалось бы всё, тупик... Но после не продолжительного мозгового штурма я придумал простое до гениальности решение. Дело в том, что никто не мешает из iframe менять location.href родительской страницы. А что б страница не перезагружалась, задействуем якори.
Вот что в итоге получилось:
Родительская страница, загружаемая из http://domain1.org/
<html> <head><title>.</title></head> <body> <script language="JavaScript"> // скрипт, который будет запускаться по команде из iframe // в данном случае это просто alert() function my_script() { alert('ok'); } // скрипт, который раз в секунду проверяет состояние родительской ссылки // и при появлении в ней якоря, начинает выполнение заданных действий function check_anchor() { var href = window.location.href.split('#'); if (href.length>1) { var anchor = href[1] || ''; window.location.href = href[0] + '#'; if (anchor == 'my_script') { my_script(); } } } // запускаем таймер, который раз в одну секунду будет выполнять check_anchor setInterval('check_anchor();', 1000); </script> <!-- подключаем iframe, который грузится со стороннего домена --> <iframe width="300" height="300" src="http://domain2.com"></iframe> </body> </html>
Подготовка выполнена: на родительской странице раз в секунду запускается скрипт check_anchor, который проверяет есть ли якоря в ссылке, по которой загружена родительская страница. Если якорь обнаружен, то его имя проверяется с текущими правилами, в данном случае с правилом для my_script.
Проверить работу скрипта не трудно: после загрузки родительской страницы добавьте в адресе якорь #my_script и нажмите <Enter>, после чего появится alert "Ok"
Теперь осталось в iframe-страницу добавить метод, который будет отсылать якоря родителю. Это самое легкое :)
<script language="JavaScript">
function top_my_script() {
top.location.href ='http://domain1.org/#my_script';
}
</script>
<input type="button" value="click" onclick="top_my_script();">
Единственное ограничение, которое идет от политики безопасности браузера, нельзя в iframe считать ссылку, по которой была загружена родительская страница. Т.е. вот такой номер не пройдет:
top.location.href = top.location.href + '#my_script';Поэтому в скрипте из iframe всегда нужно указывать явный адрес, в нашем случае это так:
top.location.href ='http://domain1.org/#my_script';
Но это относительное неудобство, так как при формировании и отдаче iframe-страницы не трудно узнать откуда она была вызвана из переменной HTTP_REFERER, и, соответственно, подставить её значение в скрипт
Ну а для двухстороннего общения Родитель ⇔ IFRAME разместите код "приемника" на странице Iframe, а код "передатчика" на стороне родителя, только не забудьте в "передатчике" вместо top поставить имя iframe-окна
Похожие материалы:
Комментарии:
22 Октября 2010 (14:42:36)
Джоник
(гость)
• ответить
Можно было проще попробывать с .htaccess
14 Апреля 2011 (23:20:44)
андрей 38
(гость)
• ответить
Cпасибо ОГРОМНОЕ ! Буду разбираться. Сделал на яве вэб магазин, а это еще не понимаю.Очень необходима такая штука. Я поглщен этим вопросом. Спасибо ГУРУ !
6 Ноября 2012 (23:41:02)
Алекс
(гость)
• ответить
А мне бы надо сделать тоже самое, но с условием, что к коду Iframe-страницы доступа нет, то есть источник Iframe - чужой домен. Получается - никак? (
23 Октября 2016 (12:18:08)
Арсен
(гость)
• ответить
Помогите мне пожалуйста такое провернуть у меня не много другая ситуация хочу пихнуть в input и нажать интер в iframe сайт на другом домене !
31 Января 2021 (15:27:47)
Иван
(гость)
• ответить
Вы в здесь не напутали ничего?
if (anchor == 'my_script') {
my_script();
}