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, so there's a frame in a that just calls B.

Now, they want that when B 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.MyCompany/Order/Details/123"

But B doesnt know nothing about A, or which order # it is or anything, but Page A who has the frame B does know it.

For know my solution is to just redirect to all the order so something like client.MyCompany/Orders

but since B doesn't know which client it is, 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!

Answer 1

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.

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.

Answer 3

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 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 involve, 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.

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.