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****
js 跨域复习 window.name | window.domain | iframe | Jsonp的更多相关文章
- window.opener方法的使用 js跨域
原文:window.opener方法的使用 js跨域 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.open文件打开一个lo ...
- window.opener方法的使用 js 跨域
用到了这个方法: window.opener.location.reload() 与 window.opener.location.href=window.opener.location.href 都 ...
- JS跨域--window.name
JS跨域--window.name:https://www.jianshu.com/p/43ff69d076e3
- JS跨域：jsonp、跨域资源共享、iframe+window.name
JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...
- JS跨域解决方式 window.name
window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制.数据只能是字符串.设置和获取 cookie 语法的复杂等等 ...
- [转]JS跨域解决方式 window.name
本文转自:http://www.cnblogs.com/lichuntian/p/4909465.html window.name 传输技术,原本是 Thomas Frank 用于解决 cookie ...
- JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 前端Js跨域方法汇总—剪不断，理还乱，是跨域
1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...
- 【js跨域】js实现跨域访问的几种方式
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
随机推荐
- JAVA中的继承特点1
*如果子类与父类有相同的字段,则子类中的字段会代替或隐藏父类的字段,子类方法中访问的是子类中的字段(而不是父类中的字段).如果子类方法确实想访问父类中被隐藏的同名字段,可以用super关键字来访问它. ...
- swift - 全屏pop手势
UINavigationController系统自带有侧滑手势,但是这个手势第一点只能边缘侧滑才可以有效,第二点当手动隐藏系统的导航时,这个手势就不能生效了 为了能到达到全屏pop的效果这里有2中解决 ...
- java -cp 命令 java jar 命令和 hadoop jar 命令
-cp 和 -classpath 一样,是指定类运行所依赖其他类的路径,通常是类库,jar包之类,需要全路径到jar包,window上分号“;” java -cp .;myClass.jar pa ...
- poj 2367
Genealogical tree Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3658 Accepted: 2433 ...
- git学习之简介（一）
一.前言 史上最浅显易懂的Git教程! 为什么要编写这个教程?因为我在学习Git的过程中,买过书,也在网上Google了一堆Git相关的文章和教程,但令人失望的是,这些教程不是难得令人发指,就是简单得 ...
- 微服务网关哪家强？一文看懂Zuul, Nginx, Spring Cloud, Linkerd性能差异
导语:API Gateway是实现微服务重要的组件之一.面对诸多的开源API Gateway,如何进行选择也是架构师需要关注的焦点.本文作者对几个较大的开源API Gateway进行了压力测试,对 ...
- saltstack之软件管理
1.installed安装软件包 例: 安装NFS /srv/salt/pkg/nfs.sls nfs: pkg.installed: - pkgs: - nfs-utils 在命令行执行如下 sal ...
- Brain Network (medium)(DFS)
H - Brain Network (medium) Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d &am ...
- 我的Android进阶之旅------>Android自定义窗口标题实例
该实例的功能比较简单,但是通过该实例的扩展可以在自定义标题中做出菜单导航等实用的功能,为了实现自定义窗口标题,需要做以下几个步骤: 1.给自定义标题提供一个界面 2.将自定义标题应用给Activity ...
- socket编程python+c
python版: server: def socket_loop_server_function(): HOST = '192.168.56.1' PORT = 21567 sk = socket.s ...