Encapsulation of cross-domain communication for IFRAME

GitHub Source: Https://github.com/boycy815/topProxy

I relied on kissy:http://docs.kissyui.com/to be lazy.

Use examples:

The requirement is to embed the http://www.iframe.com/iframe.html through the IFRAME in the http://www.demo.org/top.html, while in the IFRAME page you want to call a JS method of the top page by clicking a button.

Back to the column page: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/

1. Create a method on the top page for internal page use

function Testfun (text) {

alert (text);

}

2. Embedding iframe in http://www.demo.org/top.html

<iframe width= "height=" src= "http://www.iframe.com/iframe.html" ></iframe>

3. Establishment of a www.demo.org domain to establish a proxy page http://www.demo.org/proxy.html for use across domain communication

4. Add logic to proxy page in http://www.demo.org/proxy.html

5. Configure the proxy page address through JS in the http://www.iframe.com/iframe.html page

topproxyconfig = {url: ' http://www.demo.org/proxy.html '};

6. Load Communication module via Kissy

Kissy.use (' Topproxy ', function (S, topproxy) {

Executing code

});

7. In http://www.iframe.com/iframe.html through the Topproxy.call direct access to http://www.demo.org/top.html methods, such as

Kissy.use (' Topproxy ', function (S, topproxy) {

Topproxy.call (' Testfun ', ' This is a true story ');

});

Where the first parameter of the call method is the global method name of the external Web page, the "." is supported, and the following parameters are infinite, which are uploaded to the target method.

Note:

1. After the call may not be executed immediately, will wait until the IFRAME loaded before the trigger, if you want to preload can be implemented in advance a useless method.

2. If you do not set the Topproxyconfig, you will consider referencing the IFRAME and the parent iframe in the same domain (large domain) and call the top object directly.

3. The system method in the top may be called directly under IE678 to make an error, because the system method does not support apply.

Principle:

A page embedded in the IFRAME page B, where b wants to call a method and pass the data, then you can embed a page in B with the same field of an IFRAME page c,c can access to a window through window.top. Then in B You can change the C's href hash to C to pass some information, and then C to pass the information to a, thereby indirectly to a B to pass the message.

Author: cnblogs Little Night Clifford