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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
绑定回车enter事件代码
May 18 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
浅谈Vue.set实际上是什么
Oct 17 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
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
Vue Element校验validate的实例
2020/09/21 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python如何判断数独是否合法
2016/09/08 Python
django解决跨域请求的问题详解
2019/01/20 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python扫描线填充算法详解
2020/02/19 Python
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
二年级体育教学反思
2014/01/15 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
女娲补天教学反思
2014/02/05 职场文书
寄语十八大感言
2014/02/07 职场文书
银行简历自我评价
2014/02/11 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2014年督导工作总结
2014/11/19 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
安全学习心得体会范文
2016/01/18 职场文书
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS