引起跨域的原因：

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

影响：a通过js脚本向b发送ajax请求，不同源就会报错

不受影响：script标签，img标签等外部资源引用，重定向，表单提交都不受影响

****iframe遇到的跨域问题****

情况一、假设有a.com/main.html ;  a.com/b.html

这种情况是涉及不到跨域的

main.html代码：

  1. <html lang="en">
  2. <head>
  3. 	<meta charset="UTF-8">
  4. 	<title>Document</title>
  5. </head>
  6. <body>
  7. 	<div class="box">
  8. 		<iframe id="if" src="b.html" frameborder="0"></iframe>
  9. 	</div>
  10. <script>
  11.     //获取b的数据
  12.     var bdoc = window.frames[0].document;
  13.     //通过bdoc做操作
  14. </script>
  15. </body>
  16. </html>

b.html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. </head>
  7. <body>
  8. 	<input id="message" type="text" />
  9. 	<script>
  10.                 //获取父窗docuemnt
  11. 		var pdoc = parent.document;
  12. 	</script>
  13. </body>
  14. </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代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. </head>
  7. <body>
  8. 	<input id="message" type="text" />
  9. 	<script>
  10.          window.name = "我是要传递的消息";
  11.         </script>
  12. </body>
  13. </html>

a.html代码：

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Document</title>
  5. </head>
  6. <body>
  7.     <div class="box">
  8.         <iframe id="if" src="b.com/b.html" frameborder="0"></iframe>
  9.     </div>
  10. <script>
  11.     var fr = document.getElementById('if'),
  12.         state = 0;;
  13.         if(window.VBArray){//兼容ie
  14.             fr.onreadystatechange = function(){
  15.                 if(this.readyState == 'complete'){
  16.                     if(state == 1){
  17.                         // 获取数据
  18.                         data = fr.contentWindow.name;
  19.                     }else{
  20.                         state = 1;
  21.                         // 重置iframe窗口的src保证同源
  22.                         fr.src = 'a.com/blank.html';
  23.                     }
  24.                 }
  25.             }
  26.         }else{
  27.             fr.addEventListener('onload',function(){
  28.                 if(state == 1){
  29.                     // 获取数据
  30.                     data = fr.contentWindow.name;
  31.                 }else{
  32.                     state = 1;
  33.                     // 重置iframe窗口的src保证同源
  34.                     fr.src = 'a.com/blank.html';
  35.                 }
  36.             },false);
  37.         }
  38. </script>
  39. </body>
  40. </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代码：

  1. funciton dealData(data){
        //处理数据
    }
    var script = document.createElement("script");
  2.     script.src = "https://b.com/ask?data=1&callback=dealData";
  3.     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代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 		.box{width:800px;height:400px;background:#ccc;}
  8. 	</style>
  9. </head>
  10. <body>
  11. 	<div class="box">
  12. 		<iframe id="if" src="message.html" frameborder="0"></iframe>
  13. 	</div>
  14. 	<script>
  15. 	window.onload = function(){
  16. 		window.frames[0].postMessage('parent','http://b.com/b.html');
  17. 	}
  18.  
  19. 	window.addEventListener('message',function(e){
  20.         var color=e.data;
  21.         console.log(color)
  22.     },false);
  23.  
  24. 	</script>
  25. </body>
  26. </html>

b.html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. </head>
  7. <body>
  8. 	<input id="message" type="text" />
  9. 	<script>
  10. 	document.getElementById('message').value=111;
  11. 	window.addEventListener('message',function(e){
  12. 		alert(1)
  13. 		console.log(e.data);
  14. 		document.getElementById('message').value=e.data;
  15. 		window.parent.postMessage(e.data,'*');
  16. 	},false);
  17.  
  18. 	</script>
  19. </body>
  20. </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. Swift开发图解入门

    <论语·卫灵公>有一段经典对白:『子贡问为仁.子曰:工欲善其事,必先利其器. --』. 对于一个程序猿来说,好的工具不意味着一定能产生优质的代码.可是好的工具对提升开发效率的作用还是不言而 ...

  2. Ubuntu 16.04 关闭/打开笔记本触摸板

    由于笔记本触摸板太多灵敏,影响使用,所以禁用掉触摸板. 禁用触摸板命令: sudo rmmod psmouse 启用触摸板命令 sudo modprobe psmouse 注意:启用之后可能会有几秒钟 ...

  3. linux 时间与本地时间不对应解决办法

    date -s '2015-01-22 13:00:22' #设置时间 clock -w #写入mac操作系统中 -------------------------------------date - ...

  4. bzoj3992【SDOI2015】序列统计

    3992: [SDOI2015]序列统计 Time Limit: 30 Sec  Memory Limit: 128 MB Submit: 673  Solved: 327 [Submit][Stat ...

  5. Javascript获取各种浏览器可见窗口大小

    function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s ...

  6. easyui首页模板

    Easyui首页html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  7. <转载> 为什么在Python里推荐使用多进程而不是多线程？

    经常我们会听到老手说:“Python下多线程是鸡肋,推荐使用多进程!”,但是为什么这么说呢?                要知其然,更要知其所以然.所以有了下面的深入研究: 首先强调背景:     ...

  8. 爬虫入门【7】Python-文件的读写和JSON

    文本文档的读写 最重要的open()方法将返回一个file对象,经常使用的两个参数为open(filename,mode) 其中,filename为file保存的地址,可以是本地地址,相对地址或者绝对 ...

  9. thinkphp5, 省略index.php

    Apache:1. httpd.conf配置文件中加载了mod_rewrite.so模块2. AllowOverride None 将None改为 All3. 把下面的内容保存为.htaccess文件 ...

  10. 我的Java开发学习之旅------>Base64的编码思想以及Java实现

    Base64是一种用64个字符来表示任意二进制数据的方法. 用记事本打开exe.jpg.pdf这些文件时,我们都会看到一大堆乱码,因为二进制文件包含很多无法显示和打印的字符,所以,如果要让记事本这样的 ...