Solution for "The same origin" - dynamic scripting


Preface

"The same origin" is a defective security mechanism that constrains components such as objects 
and pages on a browser to connecting only with the server (domain) that delivered 
the base page. See details about the problem/constrains here.

One of "workaround" is to dynamically replace content of some sctipt which loads content 
from a different server while browsers still think that a script included in a page should 
come from the same origin as the containing page.




This demo page contains following small demos


1. Demo A - Global loading solving the client/server communication problem This demo shows a simple page without any sub frame or iframe containing a div loaded with the page from coolshare.com. The "Load" button below triggers a script replacement. The new script is loaded from markqian.com. This script reload the div with content fetched from the url you specified in the "Location" field. Don't be suprise: what you will see in the div may not be a normal html page appearance since it is loaded into a div instead of a regular loading. result: I am able to cross the constrain of "the same origin" - containing content from any domain in a single page! Compatibility: IE (6.x, 7.x), FireFox (1.5.0.4), Mozilla/Netscape(7.2), Opera(9.0) were fully tested and worked in XP (v2002. sp2).
Note: it may take a while to load the given page (below). Please wait after you click at "Load" button.
Location:
A div, D, in top frame A
Note2: my web page fetcher is now working stably yet, you may sometimes get a 404 but the 404 is already from a domain (markqian.com) other than page domain (coolshare.com). So the error is also a "cross domain" error report;)
2. Demo B - Communication between areas loaded from different domains
solving the client side communication problem
This demo is similar to the "Demo A" above: the page level is loaded from coolshare.com while the div (See the source, load_test.html here, "D2"(the second div on this page below), is loaded from markqian.com. In addition, the content loaded into div "D2" (after you clicking at "Load" button) contains two methods and each of them takes care one direction: 1). Calling from outside in. At the page level, I have a button labeled "Call method in loaded Div_d2". When this button is clicked, it invokes doCallDiv that in turn calls callMeInDiv inside the loaded div "D2". This demostrates that we can also calls methods inside the loaded div from outside of the div. Here are the steps to try it: i). clicking at the button labeled "Call method in loaded Div_d2" before clicking at button "Load", you will get a "undefined" error since the method callMeInDiv is not loaded yet. ii). click at "Load" button. iii). click at the button labeled "Call method in loaded Div_d2" again. You will see the method within D2, callMeInDiv, is called and popup an alert. 2). Calling from inside out. The onClick of the button labeled "call method 'callMe' at page level" calls a method at the page level, callMe. This prooves that we can make call from inside the div to outside methods. Here are the steps to try it: i). click at "Load" button. You will see the D2 is loaded from markqian.com and there is a button labeled "call method 'callMe' at page level". ii). click at the button labeled "call method 'callMe' at page level". You will see the method residing at the page level (outside of the D2), callMe is invoked and popup an alert. result: I am able to make calls crossing two areas loaded from different domains in a single page bidirectionly! Compatibility: IE (6.x, 7.x), FireFox (1.5.0.4), Mozilla/Netscape(7.2), Opera(9.0) were fully tested and worked in XP (v2002. sp2).
Action:
A div, D2, in top frame A