Several cross-domain methods in Javascript

In client programming languages ​​such as JavaScript, the same origin policy stipulates that cross-domain scripts are isolated. Scripts in one domain cannot access and operate most of the properties and methods of another domain. Only when two domains have the same protocol, the same host, and the same port, we consider them to be the same domain. However, in actual development, we often need to obtain resources from other domains. At this time, various cross-domain resource methods come into play. Today, we will mainly summarize several cross-domain methods commonly used in work for query.

1.window.name

The name attribute of the window object is a very special attribute. When a new page is loaded in the frame, the name attribute value remains unchanged. Then we can use iframe in page A to load page B of other domains, and use JavaScript in page B to assign the data to be passed to window.name. After the iframe is loaded, the name attribute value can be obtained for access. 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, when the remote web service page is loaded, the frame must be navigated back to the original domain. That is, page A modifies the address of the iframe and changes it to an address in the same domain, and then the value of window.name can be read out. Once the name property is obtained, destroy the frame. This method is very suitable for one-way data requests, and the protocol is simple and safe.

The code for page B (www.jesse.com/data.html) is as follows:

<script type="text/javascript">
window.name = 'I was there!';
// 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右
// 数据格式可以自定义，如json、字符串
</script>

Page A (www.jack.com/ index.html) code is as follows:

<script type="text/javascript">
var state = 0,
  iframe = document.createElement('iframe'),
  loadfn = function() {
    if (state === 1) {
      var data = iframe.contentWindow.name; // 读取数据
      console.log(data); //弹出'I wasthere!'
      (function(){
        //获取数据以后销毁这个iframe。
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
      })();
    } else if (state === 0) {
      state = 1;
      // 设置的代理页面使其回原始域
      iframe.contentWindow.location = "http://www.jack.com/proxy.html"; 
    }
  };
iframe.src = 'http://www.jesse.com/data.html';
if (iframe.attachEvent) {
  iframe.attachEvent('onload', loadfn);
} else {
  iframe.onload = loadfn;
}
document.body.appendChild(iframe);
</script>

2. With src tag

Although the browser prohibits cross-domain access by default, it does not It is not prohibited to use the src attribute of the tag in the page to reference files from other domains. Based on this, complete cross-domain communication can be easily achieved by creating node methods with src attributes. There are several cross-domain methods using this principle:

Dynamic creation script

For example, if I want to load the data of domain B from the page pageA of domain A, then on the page pageB of domain B In this example, I declare the data required by pageA in the form of JavaScript, and then load pageB using the script tag in pageA, then the script in pageB will be executed.

pageA(www.jack.com/index.html) code is as follows:

function getData(data){
  //这里是对获取的数据的相关操作
  console.log(data);
  //数据获取到后移除创建的script标签
  document.body.removeChild(originData);
}
var originData = document.createElement('script');
originData.src = 'http://www.jesse.com/data.js';
originData.setAttribute("type", "text/javascript");
document.body.appendChild(originData);

pageB(www.jesse.com/data. js) code is as follows:

getData('这里是远程跨域获取的数据');//数据格式可以自定义，如json、字符串

jsonp

When using $.ajax() to obtain remote data, it can be used if it is a cross-domain resource Using the jsonp method, I used to think that jsonp was a type of ajax, but later I realized that they were not the same thing at all. Ajax requests data in xhr mode, while jsonp requests data in script mode. This is the same as the dynamic script creation method above.

pageA(www.jack.com/index.html) code is as follows:

$.ajax({
  //JSONP不支持POST方式
  type:"GET",
  url:"http://www.jesse.com/data.php",
  dataType:"jsonp",
  //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
  jsonpCallback:"getData",
  success: function(data){
    console.log(data);
  },
  error: function(){
    console.log('fail');
  }
})

pageB(www.jesse.com /data.js) The code is as follows:

<?php
  $callback = $_GET[&#39;callback&#39;];//得到回调函数名,这里是getData
  $data = array(&#39;a&#39;,&#39;b&#39;,&#39;c&#39;);//要返回的数据
  echo $callback.&#39;(&#39;.json_encode($data).&#39;)&#39;;//输出
?>

3.document.domain

For examples where the main domain is the same but the subdomains are different, you can Solved by setting document.domain. The specific method is to add document.domain = "a.com" to the two files http://www.php.cn/ and http://www.php.cn/ respectively; and then pass the a.html file Create an iframe in to control the contentDocument of the iframe, so that the two js files can "interact". Of course, this method can only solve the situation where the primary domain is the same but the secondary domain name is different

a.html on www.a.com

document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
  var doc = ifr.contentDocument || ifr.contentWindow.document;
  // 在这里操纵b.html
  alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

b.html on script.a.com

document.domain = 'a.com';

4. Cross-domain resource sharing (CORS)

Principle :Cross-Origin Resource Sharing (CORS) defines a cross-domain access mechanism that allows AJAX to achieve cross-domain access. CORS allows a web application on one domain to submit cross-domain AJAX requests to another domain. Implementing this functionality is as simple as sending a response header by the server. It ensures request security through client + server collaborative declaration. The server will add a series of HTTP request parameters (such as Access-Control-Allow-Origin, etc.) to the HTTP request header to limit which domain requests and which request types can be accepted, and the client must declare its own when initiating a request. Origin (Origin), otherwise the server will not process it. If the client does not make a statement, the request will even be directly intercepted by the browser and will not reach the server. After receiving the HTTP request, the server will compare the domains, and only requests from the same domain will be processed.

pageA(www.jack.com/index.html) code is as follows:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    console.log(xhr.responseText);
  }
};
xhr.open("get","http://www.jesse.com/data.php");
xhr.send(null);

pageB(www.jesse.com/data. php) code is as follows:

<?php
  header("Access-Control-Allow-Origin: http://www.php.cn/");//与简单的请求相同
  header("Access-Control-Allow-Methods: GET, POST");//允许请求的方法
  header("Access-Control-Max-Age: 3628800"); //将这个请求缓存多长时间
  $data = array(&#39;a&#39;,&#39;b&#39;,&#39;c&#39;);//要返回的数据
  echo json_encode($data);//输出
?>

5.window.postMesage is not commonly used

window.postMessage(message,targetOrigin) method is newly introduced in html5 Features, you can use it to send messages to other window objects, whether the window object belongs to the same source or different sources, currently IE8+, FireFox, Chrome, Opera and other browsers already support the window.postMessage method.

pageA(www.jack.com/index.html) code is as follows:

<iframe id="proxy" src="http://www.jesse.com/index.html" onload="postMsg()" style="display: none"></iframe>
<script type="text/javascript">
var obj = {
  msg: 'hello world'
}

function postMsg() {
  var iframe = document.getElementById('proxy');
  var win = iframe.contentWindow;
  win.postMessage(obj, 'http://www.jesse.com');
}
</script>

pageB(www.jesse.com/data.php)代码如下：
<script type="text/javascript">
window.onmessage = function(e) {
  console.log(e.data.msg + " from " + e.origin);
}
</script>

6. location. Hash is not commonly used

pageA(www.jack.com/index.html) code is as follows:

function startRequest() {
  var ifr = document.createElement('iframe');
  ifr.style.display = 'none';
  ifr.src = 'http://www.jesse.com/b.html#sayHi'; //传递的location.hash 
  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, 5000);
window.onload = startRequest;

pageA(www.jack.com /proxy.html) The code is as follows:

parent.parent.location.hash = self.location.hash.substring(1);

pageB(www.jesse.com/b.html) The code is as follows:

function checkHash() {
  var data = '';
  //模拟一个简单的参数处理操作
  switch (location.hash) {
    case '#sayHello':
      data = 'HelloWorld';
      break;
    case '#sayHi':
      data = 'HiWorld';
      break;
    default:
      break;
  }
  data && callBack('#' + data);
}

function callBack(hash) {
  // ie、chrome的安全机制无法修改parent.location.hash，所以要利用一个中间的www.a.com域下的代理iframe
  var proxy = document.createElement('iframe');
  proxy.style.display = 'none';
  proxy.src = 'http://www.jack/c.html' + hash; // 注意该文件在"www.jack.com"域下
  document.body.appendChild(proxy);
}
window.onload = checkHash;

The above is the entire content of this article. I hope it will be helpful to everyone's study. I also hope that everyone will support the PHP Chinese website.

For more articles related to several cross-domain methods of Javascript, please pay attention to the PHP Chinese website!