Как общаться между кадрами?

Question

Я поддерживаю приложение, которое выглядит примерно так:

Есть страница A с рамкой, которая показывает страницу B. Теперь страница B является частью совершенно другого продукта в отдельном домене.

Теперь они хотят, чтобы при щелчке по опции в B вся страница перенаправлялась на другую страницу в A. Проблема в том, что URL-адрес A похож на www.client.A.com/Order/Details/123, и когда мы нажимаем, он должен перенаправить на что-то вроде www.client.A.com/Order/Edit/123, но B ничего не знает об A. Он не знает, какой порядок # выбран в данный момент или что-то об A. Страница A, у которой есть рамка B, знает это.

На данный момент мое решение заключается в том, чтобы просто перенаправить на AllOrders что-то вроде client.MyCompany / Orders

но так как B не знает, какой client его называет (это мультитенантное приложение), я добавлю его в webconfig. (поэтому каждый клиент имеет свой собственный webconfig с другим значением).

Я не считаю это решение оптимальным, но я не могу думать ни о чем другом! Я уже пытался поместить нужный URL на странице A в скрытый Div (поскольку A действительно знает всю информацию), а затем пытался прочитать весь DOM страницы из B, чтобы найти его .... к сожалению, я могу получить доступ только к DOM кадра В ... (я пытался с jquery).

Я знаю, что рамки - это зло, но вот как это написано ... есть идеи?

Спасибо!

Answer 1

Если родительская страница A и страница iframe B находятся в разных доменах, вы не сможете получить доступ к методам или полям через родительское свойство B, а сценарий на A не сможет получить доступ к содержимому B, а также не будет возможность обмена глобальными переменными между A и B. Эта граница, размещенная между страницей A и страницей B, является ключевой частью модели безопасности браузера. Это то, что мешает evil.com обернуть веб-страницу вашего онлайн-банка и украсть информацию о вашем счете, просто прочитав внутренние переменные javascript веб-страницы банка.

Если вам нужна роскошь браузеров последнего поколения, вы можете использовать технику пост-сообщения, упомянутую в одном из других ответов здесь. Если вам требуется поддержка старых браузеров, вы можете передавать небольшие объемы информации, используя методы междоменного клиентского скриптинга в браузере. Одним из примеров этого является использование iframes для передачи информации между внешней страницей A и внутренней страницей B. Это непросто и требует много шагов, но это можно сделать. Я написал статью об этом некоторое время назад.

Вы не сможете отслеживать клики в iframe B с родительской страницы A. Это нарушение политик безопасности браузера на нескольких уровнях. (Нажмите, например, для перехвата). Вы не сможете увидеть, когда URL-адрес B изменится - A может написать в свойство iframe.src, чтобы изменить URL-адрес, но как только iframe.src указывает на домен, отличный от домена A, A больше не может читать свойство iframe.src.

Если A и B находятся в разных поддоменах одного корневого домена, у вас может быть возможность «понизить» домен до общего корня. Например, если внешняя страница A размещена в поддомене A.foo.bar.com, а B размещена в поддомене foo.bar.com, вы можете понизить домен на странице A до foo.bar.com (назначив window.domain = "foo.bar.com" в сценарии А). Страница A будет тогда вести себя как одноранговая страница B, и тогда они смогут получать доступ к данным друг друга по мере необходимости, даже если A технически обслуживается из другого домена, чем B. Я написал статью о понижение домена тоже.

Снижение домена может привести к отслоению только самых внутренних поддоменов для работы в контексте корневого домена. Вы не можете изменить A.foo.bar.com на abc.com.

Существует также небольшой риск при понижении доменов до общего корневого домена. Когда вы управляете своей страницей в своем собственном поддомене, ваш html и скрипт отделяются от других поддоменов вне общего корневого домена. Если сервер в одном из других поддоменов скомпрометирован, это не повлияет на вашу HTML-страницу.

Если вы понижаете домен своей страницы до общего корневого домена, вы предоставляете внутренним компонентам сценарий, выполняющийся в общем корневом домене, и сценарии из других поддоменов, которые также понижают свой домен до общего корневого домена. Если сервер в одном из других поддоменов будет взломан, он получит доступ к внутренним компонентам вашего скрипта и, следовательно, может также скомпрометировать ваш поддомен.

Answer 2

в случае, если страница и фрейм не находятся в одном домене, вам придется использовать postmessage , поскольку политика того же домена запрещает нормальный javascript-обмен данными между страницами / фреймами разных доменов из-за безопасности беспокойство.

postmessage является частью html5, а работает во всех современных браузерах (включая IE8) . если вам нужна поддержка старых браузеров (в частности, IE6 / 7), вы можете использовать плагин jQuery postmessage (который прозрачно прибегает к некоторой хорошей хитрости хэш-тегов для старых браузеров).

и как замечание: не уверен, что фреймы - это зло, есть некоторые проблемы (юзабилити, SEO, ...), связанные с ними, но я провел некоторое исследование, и большинство из них можно решить я думаю.

Answer 3

Если вы хотите общаться между кадрами в javascript, вы можете использовать «parent»:

Если кадр A имеет переменное значение, например:

var orderNo = 2;

Для кадра B, чтобы прочитать егоэто будет относиться к

var frameA_orderNo = parent.frames[0].orderNo;

(при условии, что кадр A является первым объявленным кадром)

Таким образом, вы можете установить глобальные переменные в каждом кадре, которые может прочитать другой кадр, и, следовательно, вы можетеполучить заказ # в старомодном javascript (никогда не пробовал в jquery).

Ничего себе фреймы - никогда не думал, что я снова о них подумаю.