S3.Blog

30 Апреля 2017
A A A   RSS-лента
"Я знаю, что ничего не знаю, но многие не знают и этого". Сократ [?].

JavaScript: Взаимодействие Iframe с не родным доменом

Дата последнего изменения: 23 Ноября 2009
Метки статьи: Готовые решения, © Авторское, HTML, JavaScript
Сегодня была нетривиальная задача. На HTML-странице находится IFRAME, который грузится с постороннего домена. Надо было при клике внутри iframe отработать javascript, расположенный на родительской странице.
 

Казалось бы, что тут сложного:
<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-окна


Похожие материалы:




Джоник (гость) • ответить
Можно было проще попробывать с .htaccess
андрей 38 (гость) • ответить
Cпасибо ОГРОМНОЕ ! Буду разбираться. Сделал на яве вэб магазин, а это еще не понимаю.Очень необходима такая штука. Я поглщен этим вопросом. Спасибо ГУРУ !
Алекс (гость) • ответить
А мне бы надо сделать тоже самое, но с условием, что к коду Iframe-страницы доступа нет, то есть источник Iframe - чужой домен. Получается - никак? (
Арсен (гость) • ответить
Помогите мне пожалуйста такое провернуть у меня не много другая ситуация хочу пихнуть в input и нажать интер в iframe сайт на другом домене !

 
 
  Имя *:   Решите пример *: =
 
Полужирный Курсив Подчеркнутый Перечеркнутый
 
Вставить изображение Сделать цитатой Вставить ссылку Вставить код

Вставить смайл
 
 

 



© S3.Blog: Если критикуешь, не предлагая решения проблемы, то ты становишься частью этой проблемы.