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 RemoteScriptGuru.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 (RemoteScriptGuru.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 RemoteScriptGuru.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 RemoteScriptGuru.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:
Call page level function from loaded div





  A div, D2, in top frame A