Cuelogic Blog Icon
Cuelogic Career Icon
Home > Blog > All > Fragment Id Messaging Concept

Fragment Id Messaging Concept


we use a hack called fragment id messaging. This should be cross-browser , provided the page containing your iframe is the top level.


In other words, there are a total of two levels.

Basically, the child sets the fragment of the parent, and the parent watches for this.


Generally fragment id messaging use for cross-domain communication.

Technically, this hack uses window.location.hash (the part of the URL following #) to communicate.


Historically, any window could change the location of any other window. This turned out to be a problem because, among other things, it meant embedding a login iframe in a window was unsafe (because then a malicious site could replace the login iframe with a spoofed version). Over time further restrictions have been applied to location changes to browser windows, until now, when HTML5 and most browsers have reached common agreement on the ancestor policy. In a nutshell, paraphrasing the HTML5 specification, a window A can change the location of another window B if:


* the locations of A and B have the same origin, which is to say they have the same scheme, host, and port (http,, 80 for example), or

* B is a top-level window, and A is a window in a frame nested at some depth within B (direct child, child of a child, etc.), or

* B is a window opened using and A can change the location of the window that opened B (so B is a popup opened by A, by a popup window opened by A, or at greater depth), or

* B isn’t a top-level window, but its parent window, or its parent’s parent window, or at some similar amount of parentage the locations of that window and A are same-origin


(Same origin is more complicated than this, but the embedded description above catches its essence and covers the most common cases.)


Under this policy, C may change the location of A, and A may change the location of B or C, but C may not change the location of B. If you need to work around this, then you should change your page A’s location to something that changes B as appropriate; alternately, you could ask your page B to change its own location.