js 跨域复习 window.name | window.domain | iframe | Jsonp
引起跨域的原因:
浏览器的同源策略,但是当你要发送请求的时候,出于安全性问题,浏览器有严格的要求,必须协议,域名,端口都相同,这个就是同源策略。
影响:a通过js脚本向b发送ajax请求,不同源就会报错
不受影响:script标签,img标签等外部资源引用,重定向,表单提交都不受影响
****iframe遇到的跨域问题****
情况一、假设有a.com/main.html ; a.com/b.html
这种情况是涉及不到跨域的
main.html代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box">
<iframe id="if" src="b.html" frameborder="0"></iframe>
</div>
<script>
//获取b的数据
var bdoc = window.frames[0].document;
//通过bdoc做操作
</script>
</body>
</html>
b.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="message" type="text" />
<script>
//获取父窗docuemnt
var pdoc = parent.document;
</script>
</body>
</html>
情况二、假设有a.com/main.html ; b.a.com/b.html 此时主域相同子域不同
只需要在两个页面同时显式的设置docuement.domian = “a.com”即可
情况三、主域不同 假设有页面 a.com/main.html ; a.com/blank.html ; b.com/b.html
此时可以利用window.name实现消息传递,具体做法如下:
b.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="message" type="text" />
<script>
window.name = "我是要传递的消息";
</script>
</body>
</html>
a.html代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box">
<iframe id="if" src="b.com/b.html" frameborder="0"></iframe>
</div>
<script>
var fr = document.getElementById('if'),
state = 0;;
if(window.VBArray){//兼容ie
fr.onreadystatechange = function(){
if(this.readyState == 'complete'){
if(state == 1){
// 获取数据
data = fr.contentWindow.name;
}else{
state = 1;
// 重置iframe窗口的src保证同源
fr.src = 'a.com/blank.html';
}
}
}
}else{
fr.addEventListener('onload',function(){
if(state == 1){
// 获取数据
data = fr.contentWindow.name;
}else{
state = 1;
// 重置iframe窗口的src保证同源
fr.src = 'a.com/blank.html';
}
},false);
}
</script>
</body>
</html>
注意:window.name最大存储2M,只能存储字符串格式。由于此方法会重新加载空页面作为iframe的源,所以只适用于隐藏iframe的情况
****还有一种方式通过document.hash****
由父窗口修改子窗口的src添加hash,hash就是要传递的数据,修改hash不会导致页面刷新,子窗口通过一个定时器,定时检测hash是否变化,从而获取父窗口给的数据。
*****Jsonp跨域****
jsonp跨域原理:假设有a.com/a.html ;
,原理:动态创建script标签,利用script标签src不受同源策略影响
在页面定义处理数据的函数,参数就是要处理的数据,有后台返回一段js代码,这段代码必须调用a重定义的函数,将返回数据放在参数里
a.com/a.html代码:
funciton dealData(data){
//处理数据
}
var script = document.createElement("script");
script.src = "https://b.com/ask?data=1&callback=dealData";
document.body.insertBefore(script, document.body.firstChild);
此时后台返回的不是一般意义上的数据,而是一段script代码,这段代码调用我们的回调函数
由于是通过src来发出请求的,所以jsonp只能是get请求
****利用h5的api postMessage跨域****
假设有a.com/main.html ; b.a.com/b.html
这种方法一方通过postMessage向另一方发送消息,另一方通过onmessage事件获取到消息
postMessage(发送消息内容,发送目的地)
onmessage事件通过event.data获取消息
详细语法可以参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
a.com/main.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{width:800px;height:400px;background:#ccc;}
</style>
</head>
<body>
<div class="box">
<iframe id="if" src="message.html" frameborder="0"></iframe>
</div>
<script>
window.onload = function(){
window.frames[0].postMessage('parent','http://b.com/b.html');
} window.addEventListener('message',function(e){
var color=e.data;
console.log(color)
},false); </script>
</body>
</html>
b.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="message" type="text" />
<script>
document.getElementById('message').value=111;
window.addEventListener('message',function(e){
alert(1)
console.log(e.data);
document.getElementById('message').value=e.data;
window.parent.postMessage(e.data,'*');
},false); </script>
</body>
</html>
****利用Cors跨域,这个方式需要后台配合设置header****
最新文章
- MFC vs2012 Office2013 读写excel文件
- Activiti 学习笔记(2016-8-30)
- MongoDB 多条件组合查询
- 使用dnsmasq快速搭建内网DNS
- 【转】/etc/grub.conf文件详解
- 查找并绘制轮廓[OpenCV 笔记XX]
- 学用 ASP.Net 之 System.Math 类
- 获取EIP(汇编语言直接给Delphi变量赋值)
- HDU1257-最少拦截系统
- Sql CE 数据库编程
- rewrite写法
- [.Net Core] 在 Mvc 中简单使用日志组件
- 【转】Redis一般会遇到的问题以及解析
- 浅析android系统设计中的回调思想
- C#Workbooks 对象的 Open 方法参数说明
- (二维数组 亿进制 或 滚动数组) Hat&#39;s Fibonacci hdu1250
- python基础学习13----生成器&;迭代器
- linux学习(rz和sz命令的安装和使用)
- Azure disk iops的测试
- 如何将微信上传AMR格式语音转化为MP3格式
热门文章
- hdu 1398 Square Coins 分钱币问题
- iOS自动化构建 xcode-select: error: tool &#39;xcodebuild&#39; requires Xcode, but active developer directory &#39;/Library/D...
- ELK之jason配置nginx文件等多个配置文件
- VMWare虚拟机下为Ubuntu 12.04.2配置静态IP(NAT方式)
- MapReduce Input Split(输入分/切片)具体解释
- 贝塞尔曲线与CAShapeLayer的关系以及Stroke动画
- centos7.0 安转mysql5.7
- Windows7 配置两个版本的java环境,可自由切换
- EasyNVR无插件直播服务器播放页面的集成----单独的播放器样式
- 九度OJ 1355:扑克牌顺子 (模拟)