javascript跨域的几种方法
以下的例子包含的文件均为为 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跨域的几种方法的更多相关文章
- javascript 跨域 的几种方法
1.jsonp方法 转:https://blog.csdn.net/liusaint1992/article/details/50959571 主要实现功能: 1.参数拼装. 2.给每个回调函数唯 ...
- 实现跨域的N种方法
从域说起 域: 域是WIN2K网络系统的安全性边界.我们知道一个计算机网最基本的单元就是"域",这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域.在独立的计算机上,域即 ...
- vue开发环境和生产环境里面解决跨域的几种方法
什么是跨域 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...
- AJAX实现跨域的三种方法
由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请 ...
- Ajax跨域的几种方法以及每种方法的原理
js中几种实用的跨域方法原理详解 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协 ...
- js常用代码示例及解决跨域的几种方法
1.阻止默认行为 // 原生js document.getElementById('btn').addEventListener('click', function (event) { event = ...
- 后端跨域的N种方法
简单来说,CORS是一种访问机制,英文全称是Cross-Origin Resource Sharing,即我们常说的跨域资源共享,通过在服务器端设置响应头,把发起跨域的原始域名添加到Access-Co ...
- spring boot 解决 跨域 的两种方法 -- 前后端分离
1.前言 以前做项目 ,基本上是使用 MVC 模式 ,使得视图与模型绑定 ,前后端地址与端口都一样 , 但是现在有些需求 ,需要暴露给外网访问 ,那么这就出现了个跨域问题 ,与同源原则冲突, 造成访问 ...
- .net设置浏览器缓存和跨域的几种方法
.自定义过滤器属性 public class NoCacheAttribute : FilterAttribute, IActionFilter { public void OnActionExecu ...
随机推荐
- How To : Modify ASM SYS password using asmcmd 11g R2 and upper
修改RAC 11gR2及以上版本的ASM的SYS的密码方法 [grid]$ asmcmd ASMCMD> orapwusr --modify --password sys Enter passw ...
- Huawei-R&S-网络工程师实验笔记20190609-VLAN划分综合(Hybrid端口)
>Huawei-R&S-网络工程师实验笔记20190609-VLAN划分综合(Hybrid端口) >>实验开始,先上拓扑图参考: >>>实验目标:分别实现主 ...
- 【codeforces 755F】PolandBall and Gifts
[题目链接]:http://codeforces.com/contest/755/problem/F [题意] n个人; 计划是每个人都拿一个礼物来送给一个除了自己之外的人; 且如果一个人没有送出礼物 ...
- R语言为数据框添加列名或行名
1.添加列名 wts=c(1,1,1) names(wts)=c("setosa","versicolor","virginica") 2. ...
- hdu_1048_The Hardest Problem Ever_201311052052
The Hardest Problem Ever Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java ...
- [bzoj2783][JLOI2012]树_树的遍历
树 bzoj2783 JLOI2012 题目大意:给定一棵n个点的树.求满足条件的路径条数.说一个路径是满足条件的,当且仅当这条路径上每个节点深度依次递增且点权和为S. 注释:$1\le n\le 1 ...
- MySQL系列:innodb源码分析 图 ---zerok的专栏
http://blog.csdn.net/yuanrxdu/article/details/40985363
- spring mvc dispatcherservlet处理request流程
1.dispatcherservlet接收到请求后,doDispatch(request,response) 2.doDispatch()里进行handlermapping,handlermappin ...
- HDU 4362
方程很简单 p[i][j] = min{dp[i-1][k] + |pos[i-1][k] - pos[i][k]|} + v[i][j]; 循环求值肯定TLE,主要是绝对值不方便.好吧,我真的BI了 ...
- BPMN使用工具
EA 非常多设计人员都在使用EA.他不仅支持UML,相同也全然支持BPMN2.0.<BPMN规范中的三种视图 >展示的BPMN中三种视图就是使用此工具所绘制. activitidesig ...