详解Javascript几种跨域方式总结


Posted in Javascript onFebruary 27, 2017

在客户端编程语言中如javascript,同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。只有当两个域具有相同的协议,相同的主机,相同的端口时,我们就认定他们是相同的域。可是在实际开发中我们经常需要获取其他域的资源,这个时候各种不同的跨域资源方式就各显神通了,今天主要来总结一下工作中常用的几种跨域方式,以备查询。

1.window.name

window 对象的name属性是一个很特别的属性,当在 frame 中加载新页面时,name 的属性值依旧保持不变。那么我们可以在页面 A中用iframe加载其他域的页面B,而页面B中用JavaScript把需要传递的数据赋值给window.name,iframe加载完成之后,此时 name 属性值可被获取到,以访问 Web 服务发送的信息。但 name 属性仅对相同域名的 frame 可访问。这意味着为了访问 name 属性,当远程 Web 服务页面被加载后,必须导航 frame 回到原始域。即页面A修改iframe的地址,将其变成同域的一个地址,然后就可以读出window.name的值了。一旦 name 属性获得,销毁 frame 。这个方式非常适合单向的数据请求,而且协议简单、安全。

页面B(www.jesse.com/data.html)代码如下:

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

页面A(www.jack.com/index.html)代码如下:

<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.具备src的标签

虽然浏览器默认禁止了跨域访问,但并不禁止在页面中用标签的src属性引用其他域的文件。根据这一点,可以方便地通过创建具有src属性的节点方法来实现完全跨域的通信。使用这种原理的跨域方式有以下几种:

动态创建script

例如我要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据,然后在 pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行。

pageA(www.jack.com/index.html)代码如下:

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)代码如下:

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

jsonp

在用$.ajax()获取远程数据时,如果是跨域资源则可以使用jsonp方法,以前一直以为jsonp是ajax的一种,后来才明白他们根本就不是一回事。ajax是以xhr方式请求数据的,而jsonp是以script方式请求数据的,这个就是和上面的动态创建script方式一样。

pageA(www.jack.com/index.html)代码如下:

$.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)代码如下:

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

3.document.domain

对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。 具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上 document.domain = "a.com";然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以 “交互”了。当然这种办法只能解决主域相同而二级域名不同的情况

www.a.com上的a.html

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);
};

script.a.com上的b.html

document.domain = 'a.com';

4.跨域资源共享(CORS)

原理:跨源资源共享(CORS)定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。它是通过客户端+服务端协作声明的方式来确保请求安全的。服务端会在HTTP请求头中增加一系列HTTP请求参数(例如Access-Control-Allow-Origin等),来限制哪些域的请求和哪些请求类型可以接受,而客户端在发起请求时必须声明自己的源(Orgin),否则服务器将不予处理,如果客户端不作声明,请求甚至会被浏览器直接拦截都到不了服务端。服务端收到HTTP请求后会进行域的比较,只有同域的请求才会处理。

pageA(www.jack.com/index.html)代码如下:

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)代码如下:

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

5.window.postMesage 不常用

window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

pageA(www.jack.com/index.html)代码如下:

<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 不常用

pageA(www.jack.com/index.html)代码如下:

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)代码如下:

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

pageB(www.jesse.com/b.html)代码如下:

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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何学习Javascript入门指导
Nov 01 Javascript
jQuery选择器全面总结
Jan 06 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
js实现无缝滚动图
Feb 22 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
微信小程序中显示倒计时代码实例
May 09 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 #Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 #Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 #Javascript
JavaScript中Promise的使用详解
Feb 26 #Javascript
setTimeout函数的神奇使用
Feb 26 #Javascript
node.js入门学习之url模块
Feb 25 #Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 #Javascript
You might like
php email邮箱正则
2008/10/08 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
python简单实例训练(21~30)
2017/11/15 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
前台领班岗位职责
2013/12/04 职场文书
自主招生自荐信
2013/12/08 职场文书
出生医学证明样本
2014/01/17 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
求职意向书
2014/04/01 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
放飞理想演讲稿
2014/09/09 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
先进班集体事迹材料
2014/12/25 职场文书
医者仁心观后感
2015/06/17 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL