引起跨域的原因:

浏览器的同源策略,但是当你要发送请求的时候,出于安全性问题,浏览器有严格的要求,必须协议,域名,端口都相同,这个就是同源策略。

影响: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的更多相关文章

  1. window.opener方法的使用 js跨域

    原文:window.opener方法的使用 js跨域 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.open文件打开一个lo ...

  2. window.opener方法的使用 js 跨域

    用到了这个方法: window.opener.location.reload() 与 window.opener.location.href=window.opener.location.href 都 ...

  3. JS跨域--window.name

    JS跨域--window.name:https://www.jianshu.com/p/43ff69d076e3

  4. JS跨域:jsonp、跨域资源共享、iframe+window.name

    JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...

  5. JS跨域解决方式 window.name

    window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制.数据只能是字符串.设置和获取 cookie 语法的复杂等等 ...

  6. [转]JS跨域解决方式 window.name

    本文转自:http://www.cnblogs.com/lichuntian/p/4909465.html window.name 传输技术,原本是 Thomas Frank 用于解决 cookie ...

  7. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. 前端Js跨域方法汇总—剪不断,理还乱,是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  9. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

随机推荐

  1. window平台安装 MongoDB(二)

    MongoDB提供了可用于32位和64位系统的预编译二进制包,你可以从MongoDB官网下载安装,MongoDB预编译二进制包下载地址:http://www.mongodb.org/downloads ...

  2. C分配struct变量一个不理解的地方

  3. 云中应用性能管理(APM)的下一步

    Michael Kopp是Compu-ware公司卓越APM中心的一名技术分析师,他做过10多年的Java/JEE领域的设计师和开发员.另外,Kopp还专攻虚拟和云的大规模生产部署的结构和性能. ? ...

  4. mysqldump默认参数add-drop-table

    mysqldump默认参数add-drop-table 原创 2014年01月28日 11:35:18 9214 接到一个同事电话,说UAT环境上的一张表被删了,要恢复一下.原来是新项目UAT,从测试 ...

  5. MHA常用命令

    .查看ssh登陆是否成功 masterha_check_ssh --conf=/etc/masterha/app1.cnf .查看复制是否建立好 masterha_check_repl --conf= ...

  6. 向MapReduce转换:通过部分成绩计算矩阵乘法

    代码共分为四部分: <strong><span style="font-size:18px;">/*** * @author YangXin * @info ...

  7. 小贝_php+redis简单实例

    php+redis简单实例 一.说明 因为redis是c/s架构.从这个角度上.不论什么符合redis的client要求的.都能够与redis进行通讯.官方提供了非常多的client. php在web ...

  8. PHP新手必学之刚进公司装环境

    由于今天去一家公司做项目,又重新的装了一遍所熟悉的PHP环境,所以记录下来,总结下. PHP环境主要: PHPstudy(apache+mysql+php)+phpstorm+navicate 解释: ...

  9. 九度OJ 1342:寻找最长合法括号序列II (DP)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:898 解决:366 题目描述: 假如给你一个由'('和')'组成的一个随机的括号序列,当然,这个括号序列肯定不能保证是左右括号匹配的,所以给 ...

  10. 内存使用分析工具Valgrind简单用法

    转载自 http://www.cnblogs.com/sunyubo/archive/2010/05/05/2282170.html 暂时还未使用过,记录下,记录下,记录下 Valgrind的主要作者 ...