Front-end cross-domain processing

2, the front end solves cross-domain problems

　　1>document.domain+iframe (this method can only be used when the main domain is the same)

　　1) In www.a, com./a.html:

　　

document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://www.script.a.com/b.html';
ifr.display = none;
document.body.appendChild(ifr);
ifr.onload = function (){
     var doc = ifr.contentDocument || ifr.contentWindow.document;
     // Operate doc here, that is, b.html 
    ifr.onload = null ;
};

　　2) In www.script.a.com/b.html:

　　document.domain = 'a.com';

　　2> Dynamically create script

　　Because script tags are not restricted by the same-origin policy.

　　

function loadScript(url, func) {
  var head = document.head || document.getElementByTagName('head')[0];
  var script = document.createElement('script');
  script.src = url;

  script.onload = script.onreadystatechange = function(){
    if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
      func();
      script.onload = script.onreadystatechange = null;
    }
  };

  head.insertBefore(script, 0);
}
window.baidu = {
  sug: function(data){
    console.log(data);
  }
}
loadScript( 'http://suggestion.baidu.com/su?wd=w', function (){console.log('loaded' )});
 // Where is the content we requested? 
// We can see the content introduced by the script in the source of the chorme debug panel

　　3>location.hash+iframe

　　The principle is to use location.hash to pass values.

　　Suppose that the file cs1.html under the domain name a.com wants to communicate with cs2.html under the domain name cnblogs.com.

　　1) cs1.html firstly creates a hidden iframe, and the src of the iframe points to the cs2.html page under the cnblogs.com domain name.

　　2) After cs2.html responds to the request, it will pass the data by modifying the hash value of cs1.html.

　　3) At the same time, add a timer to cs1.html to judge whether the location.hash value has changed after a period of time, and obtain the hash value once there is a change.

　　Note: Because the two pages are not under the same domain, IE and Chrome do not allow to modify the value of parent.location.hash, all need to rely on a proxy under the a.com domain name.

　　code show as below:

　　First is the file cs1.html file under a.com;

　　

function startRequest(){
    var ifr = document.createElement('iframe');
    ifr.style.display = 'none';
    ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';
    document.body.appendChild(ifr);
}

function checkHash() {
    try {
        var data = location.hash ? location.hash.substring(1) : '';
        if (console.log) {
            console.log('Now the data is '+data);
        }
    } catch(e) {};
}
setInterval(checkHash, 2000);

　　cs2.html under the cnblogs.com domain name:

　

// Simulate a simple parameter handling operation 
switch (location.hash){
     case '#paramdo' :
        callBack();
        break;
    case '#paramset':
        //do something……
        break;
}

function callBack(){
    try {
        parent.location.hash = 'somedata';
    } catch (e) {
         // The security mechanism of ie and chrome cannot modify parent.location.hash, 
        // so use a proxy iframe under an intermediate cnblogs domain 
        var ifrproxy = document.createElement('iframe' );
        ifrproxy.style.display = 'none';
        ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';     // Note that the file is under the "a.com" domain 
        document.body.appendChild(ifrproxy);
    }
}

　　Domain name cs3.html under a.com

// Because parent.parent and itself belong to the same domain, you can change the value of its location.hash 
parent.parent.location.hash = self.location.hash.substring(1);