Two-way cross-origin plug-in sharing implemented by JavaScript, and javascript cross-origin plug-in

Two-way cross-origin plug-in sharing implemented by JavaScript, and javascript cross-origin plug-in

Due to browser (same-origin policy) restrictions, the cross-origin JavaScript issue has always been a tough issue. HTML5 provides the cross-document message transmission function to receive and send information between webpage documents. Using this function, not only Web pages with the same origin (domain + port number) can communicate with each other, but also can implement cross-domain communication between two different domain names.

Cross-Document message transmission Cross-Document Messaging provides the postMessage method to transmit data between different webpage documents and supports real-time message transmission. Many browsers now support this function, such as Google Chrome 2.0 +, Internet Explorer 8.0 +, Firefox 3.0 +, Opera 9.6 +, and Safari 4.0 +.

What should I do if IE6 or IE7 does not support HTML5 browsers?

You can use the window. name method, because the modification of window. name does not involve cross-domain issues. Although it is not ideal, the effect is acceptable.
However, we cannot write the window. postMessage, window. addEventListener, window. name, and so on each cross-domain request.

Therefore, I abstracted the entire cross-origin process and encapsulated it into a JavaScript plug-in to solve the problem of Bidirectional cross-origin and implement real-time communication between different webpage documents, cross-Domain communication can be implemented between two different domain names.

Demo: http://xiazai.jb51.net/201501/other/jcrossdomain_v2.rar, v2

Javascript cross-origin plug-in jcrossdomain. js

Copy codeThe Code is as follows:
(Function (win ){
/**
* No blooming trees
*
*/
Var _ jcd = {
IsInited: false,
Elmt: false,
Hash :'',
Delims :',',
Rand: function (){
Return (new Date). getTime ()
},
Msg: function (){
Alert ('Warning: You must call init function at first ');
},
Init: function (callback, elmt ){
If (_ jcd. isInited = true)
Return;
_ Jcd. isInited = true;
_ Jcd. elmt = elmt;
If (win. postMessage ){
// The browser supports the HTML5 postMessage Method
If (win. addEventListener ){
// Supports Firefox, Google, and other browsers
Win. addEventListener ("message", function (ev ){
Callback. call (win, ev. data );
}, False );
} Else if (win. attachEvent ){
// Supports Internet Explorer
Win. attachEvent ("onmessage", function (ev ){
Callback. call (win, ev. data );
});
}
_ Jcd. msg = function (data ){
_ Jcd. elmt. postMessage (data ,'*');
}
} Else {
// The browser does not support the HTML5 postMessage method, such as IE6 or 7.
SetInterval (function (){
If (win. name! ==_Jcd. hash ){
_ Jcd. hash = win. name;
Callback. call (win, _ jcd. hash. split (_ jcd. delims) [1]);
}
}, 50 );
_ Jcd. msg = function (data ){
_ Jcd. elmt. name = _ jcd. rand () + _ jcd. delims + data;
}
}
}
};

Var jcd = {

InitParent: function (callback, iframeId ){
_ Jcd. init (callback, document. getElementById (iframeId). contentWindow );
},

InitChild: function (callback ){
_ Jcd. init (callback, win. parent );
},

SendMessage: function (data ){
_ Jcd. msg (data );
}

};
Win. jCrossDomain = jcd;
}) (Window );

Method of calling the parent webpage:
Copy codeThe Code is as follows:
// Custom callback function
Var cb = function (msg ){
Alert ("get msg:" + msg );
};

// Initialize and load the id of the callback function and iframe
JCrossDomain. initParent (cb, 'iframea ');

// Send a message
JCrossDomain. sendMessage ('hello, child ');

Method of calling on the sub-page:

Copy codeThe Code is as follows:
// Custom callback function
Var cb = function (msg ){
Alert ("get msg:" + msg );
};

// Initialize and load the callback function
JCrossDomain. initChild (cb );

// Send a message
JCrossDomain. sendMessage ('hello, parent ');

Tips for simulated testing:
To achieve communication between different domains, you can add two domain names to the hosts file of the operating system for simulation.

Add two different domain names to the hosts file
127.0.0.1 parent.com
127.0.0.1 child.com

Evolution of programmers: