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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
使用JS实现动态时钟
Mar 12 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
小程序自定义圆形进度条
Nov 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
nodejs更改项目端口号的方法
2018/05/13 NodeJs
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python批量下载图片的三种方法
2013/04/22 Python
Python实现抓取网页并且解析的实例
2014/09/20 Python
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
python入门教程 python入门神图一张
2018/03/05 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
python中uuid模块实例浅析
2020/12/29 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
中学运动会广播稿
2014/01/19 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
六一活动主持词
2015/06/30 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技