javascript跨域的方法汇总


Posted in Javascript onOctober 23, 2015

此文章学习借鉴了一些其他前端同学的文章,自己做了个实践总结

以下的例子包含的文件均为为 http://www.a.com/a.html 、http://www.a.com/c.html 与 http://www.b.com/b.html,要做的都是从a.html获取b.html里的数据

1.JSONP

jsonp是利用script标签没有跨域限制的特性,通过在src的url的参数上附加回调函数名字,然后服务器接收回调函数名字并返回一个包含数据的回调函数

function doSomething(data) {
    // 对data处理
  }
  var script = document.createElement("script");
  script.src = "http://www.b.com/b.html?callback=doSomething";
  document.body.appendChild(script);

  // 1.生成一个script标签,将其append在body上,向服务器发出请求
  // 2.服务器根据 callback 这个参数生成一个包含数据的函数 doSomething({"a", "1"})
  // 3.页面事先已声明doSomething函数,此时执行 doSomething(data) 这个函数,获得数据

2.HTML5的postMessage

假设在a.html里嵌套个<iframe src="http://www.b.com/b.html" frameborder="0"></iframe>,在这两个页面里互相通信

a.html

window.onload = function() {
    window.addEventListener("message", function(e) {
      alert(e.data);
    });

    window.frames[0].postMessage("b data", "http://www.b.com/b.html");
  }

b.html

window.onload = function() {
    window.addEventListener("message", function(e) {
      alert(e.data);
    });
    window.parent.postMessage("a data", "http://www.a.com/a.html");
  }

这样打开a页面就先弹出 a data,再弹出 b data

3.window.name + iframe

window.name的原理是利用同一个窗口在不同的页面共用一个window.name,这个需要在a.com下建立一个代理文件c.html,使同源后a.html能获取c.html的window.name

a.html

var iframe = document.createElement("iframe");
  iframe.src = "http://www.b.com/b.html";
  document.body.appendChild(iframe); // 现在a.html里建一个引用b.html的iframe,获得b的数据

  var flag = true;
  iframe.onload = function() {
    if (flag) {
      iframe.src = "c.html"; 
// 判断是第一次载入的话,设置代理c.html使和a.html在同目录同源,这样才能在下面的else取到data
      flag = false;
    } else { // 第二次载入由于a和c同源,a可以直接获取c的window.name
      alert(iframe.contentWindow.name);

      iframe.contentWindow.close();
      document.body.removeChild(iframe);
      iframe.src = '';
      iframe = null;
    }
  }

b.html

window.name = "这是 b 页面的数据";

4.window.location.hash + iframe

b.html将数据以hash值的方式附加到c.html的url上,在c.html页面通过location.hash获取数据后传到a.html(这个例子是传到a.html的hash上,当然也可以传到其他地方)

a.html

var iframe = document.createElement("iframe");
  iframe.src = "http://www.b.com/b.html";
  document.body.appendChild(iframe); // 在a页面引用b
  function check() { // 设置个定时器不断监控hash的变化,hash一变说明数据传过来了
    var hashs = window.location.hash;
    if (hashs) {
      clearInterval(time);
      alert(hashs.substring(1));
    }
  }
  var time = setInterval(check, 30);

b.html

window.onload = function() {
    var data = "this is b's data"; 
    var iframe = document.createElement("iframe");
    iframe.src = "http://www.a.com/c.html#" + data;
    document.body.appendChild(iframe); // 将数据附加在c.html的hash上
  }

c.html

// 获取自身的hash再传到a.html的hash里,数据传输完毕
parent.parent.location.hash = self.location.hash.substring(1);

5.CORS

CORS是XMLHttpRequest Level 2 里规定的一种跨域方式。在支持这个方式的浏览器里,javascript的写法和不跨域的ajax写法一模一样,只要服务器需要设置Access-Control-Allow-Origin: *

6.document.domain

这种方式适用于主域相同,子域不同,比如http://www.a.com和http://b.a.com
假如这两个域名下各有a.html 和b.html,

a.html

document.domain = "a.com";
  var iframe = document.createElement("iframe");
  iframe.src = "http://b.a.com/b.html";
  document.body.appendChild(iframe);
  iframe.onload = function() {
    console.log(iframe.contentWindow....); // 在这里操作b.html里的元素数据
  }

b.html

document.domain = "a.com";

注意:document.domain需要设置成自身或更高一级的父域,且主域必须相同。

Javascript 相关文章推荐
div层的移动及性能优化
Nov 16 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 #Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 #Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 #Javascript
深入浅析javascript立即执行函数
Oct 23 #Javascript
js判断手机号运营商的方法
Oct 23 #Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 #Javascript
js计算文本框输入的字符数
Oct 23 #Javascript
You might like
mysql limit查询优化分析
2008/11/12 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
网上卖盒饭创业计划书范文
2014/02/07 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
校庆标语集锦
2014/06/25 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2014年工商所工作总结
2014/12/09 职场文书
党员示范岗材料
2014/12/19 职场文书
北京导游词
2015/02/12 职场文书
大专护理专业自荐信
2015/03/25 职场文书
小爸爸观后感
2015/06/15 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js