js 的跨域操作 window.name 和 jsonp

JavaScript中的跨域方式有两种

window.name的基本原理

A网站通过JS访问B网站的数据，首先在A网站中创建一个页面, 原理就是将数据，通过iframe的url来获取服务器数据，并监听页面的onload事件，获取window.name的值，传给回调函数，实现跨域，页面A调用代码如下：

<head>
<title>跨域获取数据</title>
<script type ="text/javascript">
function domainData(url, fn){
  var isFirst = true;
  var iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  var loadfn = function(){
    if(isFirst){
      iframe.contentWindow.location = 'http://a.com/null.html](http://a.com/null.html';
      isFirst = false;
    } else {
      fn(iframe.contentWindow.name);
      iframe.contentWindow.document.write('');
      iframe.contentWindow.close();
      document.body.removeChild(iframe);
      iframe.src = '';
      iframe = null;
    };
};

iframe.src = url;
if(iframe.attachEvent){
  iframe.attachEvent('onload', loadfn);
} else {
iframe.onload = loadfn;
}

document.body.appendChild(iframe);
}

</script>
</head>
</body>

<script type ="text/javascript">
  domainData('http://b.com/data.html', function(data){
  alert(data);
});

B网站中放一个存储数据的页面，代码如下：

<script>
  window.name = '需要跨域传递的数据';
</script>

jsonp的基本原理

由于浏览器当问js文件是可以跨域的，所以服务器请求的响应类型为"application/javascript",让浏览器认为该请求是一个js请求，客户端传入jsonpCallback，从而实现跨域，服务器响应之后调用userinfo_jsonpCallback这个方法时，就可以拿到数据：{'name':'weixin','age':8}，jquery封装之后，请求响应完毕直接回调success方法，服务器端的响应如下：

userinfo_jsonpCallback({'name':'weixin','age':8});


$.ajax({
        type: "get",
        url: "http://cache.zhushou001.com/api/v1/user.jsonp",
        data: userData,
        dataType: "jsonp",
        jsonp: "callback",
        jsonpCallback: "userinfo_jsonpCallback",
        success: function (data) {
           
        },
        error: function (data) {
            console && console.log('获取用户信息失败');
        }
    });

js 的跨域操作 window.name 和 jsonp

window.name的基本原理

jsonp的基本原理

推荐阅读更多精彩内容