Due to browser (same-origin policy) limitations, the cross-domain issue of JavaScript has always been a very difficult problem. HTML5 provides the function of cross-document message transmission, and receives and sends information between web documents. Using this function, not only can web pages with same origin (domain + port number) communicate with each other, but also can cross-domain communication between two different domain names.
Cross Document Messaging Cross Document Messaging provides the postMessage method to pass data between different web documents, supporting real-time messaging. Many browsers will now support this feature, such as Google Chrome 2.0+, Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, Safari 4.0+, etc.
So, what should I do if IE6, IE7 and other browsers that do not support HTML5?
You can use the window.name method because the modification of window.name does not involve cross-domain issues. Although it is not particularly ideal to use, the effect is acceptable.
However, we can't write window.postMessage, window.addEventListener, window.name and other contents every time we are involved in cross-domain.
To this end, I abstracted the entire cross-domain process and encapsulated it into a JavaScript plug-in to solve the two-way cross-domain problem, realize real-time communication between different web documents, and can realize cross-domain communication between two different domain names.
demo download address: http://xiazai.VeVB.COM/201501/other/jcrossdomain_v2.rar, version v2
javascript cross-domain plugin jcrossdomain.js
The code copy is as follows:
(function (win){
/**
* No blossoming trees
* 2013/12/07 17:12
*/
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 HTML5 postMessage method
if(win.addEventListener){
//Supports browsers such as Firefox, Google, etc.
win.addEventListener("message", function(ev){
callback.call(win, ev.data);
},false);
}else if(win.attachEvent){
//Support IE browser
win.attachEvent("onmessage", function(ev){
callback.call(win, ev.data);
});
}
_jcd.msg = function(data){
_jcd.elmt.postMessage(data, '*');
}
}else{
//The browser does not support HTML5 postMessage methods, such as IE6 and 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);
Calling methods in the parent page:
The code copy is as follows:
//Custom callback function
var cb = function(msg){
alert("get msg:" + msg);
};
//Initialize, load callback function and iframe id
jCrossDomain.initParent(cb, 'iframeA');
//Send a message
jCrossDomain.sendMessage('hello, child');
Calling methods in subpage:
The code copy is as follows:
//Custom callback function
var cb = function(msg){
alert("get msg:" + msg);
};
//Initialize, load callback function
jCrossDomain.initChild(cb);
//Send a message
jCrossDomain.sendMessage('hello, parent');
Simulation test tips:
In order to achieve communication between different domains, two domain names can be added 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
The evolution of programmers: