Window.name solves the problem of cross-domain data transmission

<br />Original text: http://research.microsoft.com/~helenw/papers/subspace.pdf
The window.name transmission technology was originally invented by Thomas Frank to solve some disadvantages of cookies (4 x 20 Kb limit for each domain name, data can only be strings, complex syntax for setting and getting cookies, etc.) (For details, see the original text: "Session variables without cookies"). Later, Kris Zyp strengthened the window.name transmission based on this method and introduced it into Dojo (dojox.io.windowName) to solve the problem of cross-domain data transmission.
The beauty of window.name: the name value persists after loading different pages (even different domains), and can support very long name values (2MB).
The basic principles and steps of window.name transmission technology are:

name is a property of the global/window object in the browser environment, and when a new page is loaded in the frame, the property value of name remains unchanged. By loading a resource in an iframe, the target page will set the name attribute of the frame. This name attribute value can be retrieved to access the information sent by the Web service. But the name attribute is only accessible to frames with the same domain name. This means that in order to access the name attribute, you must navigate the frame back to the original domain after the remote Web service page is loaded. The same-origin policy still prevents other frames from accessing the name attribute. Once the name attribute is obtained, destroy the frame.
At the top level, the name attribute is unsafe, and any information set in the name attribute is available to all subsequent pages. However, the windowName module always loads resources in an iframe, and once the data is retrieved, or when you browse to a new page at the top level, the iframe will be destroyed, so other pages will never have access to the window.name property.
The basic implementation code is based on YUI and is derived from the example written by Kejun:

(function(){
var YUD = YAHOO.util.Dom, YUE = YAHOO.util.Event;
dataRequest = {
_doc: document,
cfg: {
proxyUrl: 'proxy.html'
}
};
dataRequest.send = function(sUrl, fnCallBack){
if(!sUrl || typeof sUrl !== 'string'){
return;
}
sUrl = (sUrl.indexOf('?') > 0 ? '&' : '?') 'windowname=true';
var frame = this._doc.createElement('iframe'), state = 0, self = this;
this._doc.body.appendChild(frame);
frame.style.display = 'none';
var clear = function(){
try{
frame.contentWindow.document.write('');
frame.contentWindow.close();
self._doc.body.removeChild(frame);
}catch(e){}
};
var getData = function(){
try{
var da = frame.contentWindow.name;
}catch(e){}
clear();
if(fnCallBack && typeof fnCallBack === 'function'){
fnCallBack(da);
}
};
YUE.on(frame, 'load', function(){
if(state === 1){
getData();
} else if(state === 0){
state = 1;
frame.contentWindow.location = self.cfg.proxyUrl;
}
});
frame.src = sUrl;
};
})();

<<: Analyze the problem of transferring files and other parameters in the upload component of element-ui

>>: ie filter collection