How to communicate between frames?

Question

I'm maintaining an application that goes sort of like this:

There is a Page A with a Frame that shows Page B. Now page B is part of a completely different product in a separate domain.

Now, they want that when an option in B is clicked, the WHOLE page is redirected to another page in A. The problem is that the url of A is something like www.client.A.com/Order/Details/123, and when we click in be it should redirect to something like www.client.A.com/Order/Edit/123 but B doesn't know anything about A. It doesn't know which order # is currently selected or anything about A. Page A who has the frame B does know it.

For now my solution has been to just redirect to the AllOrders so something like client.MyCompany/Orders

but since B doesn't know which client is calling it (its a multi-tenant app), I'll add it in the webconfig. (so each client has its own webconfig with a different value).

I dont find this solution optimal but I can't think of anything else! I already tried putting the needed url in page A in a hidden Div (since A does know all the info) and then trying to read the whole DOM of the page from B to find it.... unfortunately I can only get access to Frame B's DOM... (I tried with jquery).

I know frames are evil, but this is how it is written... any ideas?

Thanks!

Martell

Is Page A in a different domain than B? www.foo.com vs www.bar.com? – Peavy

+1 For not complaining about having to use other people's frames! – Assuage

@Peavy yes, they are in different domains – Martell

Answer 1

If the parent page A and the iframe page B are in different domains, you will not be able to access methods or fields via B's parent property, nor will script in A be able to reach into B's content, nor will you be able to share global variables between A and B. This boundary placed between page A and page B is a key part of the browser security model. It's what prevents evil.com from wrapping your online bank web page and stealing your account info just by reading the internal variables of the javascript of the bank's web page.

If you have the luxury of requiring the latest generation of browsers, you can use the postmessage technique mentioned in one of the other answers here. If you need to support older browsers, you may be able to pass small amounts of information using cross-domain client scripting techniques in the browser. One example of this is to use iframes to communicate info between the outer page A and the inner page B. It's not easy and there are many steps involved, but it can be done. I wrote an article on this awhile ago.

You will not be able to monitor clicks in B's iframe from the parent page A. That's a violation of browser security policies at multiple levels. (Click hijacking, for one) You won't be able to see when B's URL changes - A can write to the iframe.src property to change the URL, but once the iframe.src points to a different domain than A's domain, A can no longer read the iframe.src property.

If A and B are in different subdomains of the same root domain, you may have an opportunity to "lower" the domain to a common root. For example, if the outer page A is hosted in subdomain A.foo.bar.com, and B is hosted in subdomain foo.bar.com, then you can lower the domain in page A to foo.bar.com (by assigning window.domain = "foo.bar.com" in A's script). Page A will then behave as a peer of page B and the two can then access each other's data as needed, even though A is technically being served from a different domain than B. I wrote an article on domain lowering, too.

Domain lowering can only peel off innermost subdomains to operate in the context of a root domain. You can't change A.foo.bar.com to abc.com.

There is also a slight risk in lowering domains to a common root domain. When you operate your page in its own subdomain, your html and script are segregated from the other subdomains off the common root domain. If a server in one of the other subdomains is compromised, it doesn't really affect your html page.

If you lower your page's domain to the common root domain, you are exposing your internals to script running on the common root domain and to script from other subdomains that has also lowered its domain to the common root. If a server in one of the other subdomains is compromised, it will have access to your script's internals and therefore it may have compromised your subdomain as well.

Peavy

thanks for the info :( (at least I found a way around my problem by using server side configuration files.. not so elegant/automatic but it does its job) – Martell

window.domain = "foo.bar.com" I guess you meant document.domain = "foo.bar.com" – Zelma

Answer 2

in case the page & frame are not on the same domain, you'll have to use postmessage as the same-domain policy prohibits normal javascript-communication between pages/frames of different domains because of security concerns.

postmessage is part of html5 and works in all modern browsers (including IE8). if you need support for older browsers (specifally IE6/7), you could use the jQuery postmessage plugin (which transparently falls back to some nice hash-tag trickery for older browsers).

and as a sidenote: not sure if frames are evil, there are some problems (usability, SEO, ...) related to them, but i did some research and most of these can be tackled i think.

Parr

Answer 3

If you want to communicate between frames in javascript you can use 'parent':

If frame A has a variable value, eg:

var orderNo = 2;

For frame B to read it it would refer to

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

(assuming that frame A is the first frame declared)

So you can set up global variables within each frame that the other frame can read and therefore you can get the order # in old fashioned javascript (never tried it in jquery).

Wow frames - never thought I'd think about them again.

Assuage

Thanks! I know I thought so too! About the setting up the variables... I havent really worked much with javascript.. how would I do to set up the global variables? Thanks! – Martell

As long as you don't put the variables in a function they will have page scope - so just declare them at the top of the javascript and they will be available. Also the same technique should allow you to run methods in the other frame, eg parent.frames[0].methodname(); – Assuage