Detailed explanation of iframe cross-domain communication encapsulation_jquery

iframe cross-domain communication

View the demo Source code download

As we all know, due to the security restrictions imposed by front-end javascript on cross-domain access, javascript can only access content in the same domain as the document containing it.

Usage example:

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

1. Create a method in the top page for use by internal pages

Copy code The code is as follows:

function testFun (text) {
alert(text);
}

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

Copy code The code is as follows:

3. Create a proxy page under the www.demo.org domain http://www.demo.org/proxy.htmlfor cross-domain communication

4. Add the logic for the 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

Copy code The code is as follows:

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

6. Load communication module through kissy

Copy code The code is as follows:

KISSY.use('topproxy', function(S, TopProxy){
//Execute code
});

7. Directly access http://www.demo.org/top.html through TopProxy.call at http://www.iframe.com/iframe.html Methods in , such as

KISSY.use('topproxy', function(S, TopProxy){
 TopProxy.call('testFun', '这是一个真实的故事');
});

The first parameter of the call method is the global method name of the external web page, which supports ".". There are unlimited following parameters, all of which are passed to the target method.

Note:

1. It may not be executed immediately after being called. It will be triggered after the iframe is loaded. If you want to preload, you can execute a useless method in advance.
2. If TopProxyConfig is not set, it will be considered that the referenced iframe and the parent iframe are in the same domain (large domain) and the top object will be called directly.
3. Under IE678, an error may be reported if you directly call the system method in top, because the system method does not support apply.

Principle:

Page A is embedded in iframe page B. If B wants to call A's method and pass data, then B can embed an iframe page C in the same domain as page A. C can access A through window.top window. Then in B, you can change the hash of C's href to pass some information to C, and then C passes the information to A, thus indirectly achieving the purpose of B transmitting information to A