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 相关文章推荐
jQuery版仿Path菜单效果
Dec 15 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
JS数组转字符串实现方法解析
Sep 04 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
Element Input组件分析小结
2018/10/11 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
python解析xml文件实例分享
2013/12/04 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
iPython pylab模式启动方式
2020/04/24 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
培训班主持词
2014/03/28 职场文书
日语系毕业求职信
2014/07/27 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
无线电通信名词解释
2022/02/18 无线电