js iframe跨域访问

1.什么是跨域？

2.前台解决跨域几种方法

　　2.1 动态创建script

　　2.2 使用document.domain

　　2.3使用HTML5新属性postMessage

　　2.4 利用iframe和location.hash

 

 

什么是跨域？

....................................................................................................................................................................................

Javascript处于安全方面的考虑（同源策略限制），不允许跨域调用其他页面的对象。

也就是“Domains,protocols,posts”不一样就是跨域。

“Domains”就是指的域名，

“protocols”就是协议，分为http和https，

“ports”就是端口名称

需要注意的是：

　　1.如果是protocols和ports不一致造成的跨域，前台没有办法解决

　　2.域只通过URL的首部，也就是protocols+domain+port来判断是否跨域，不会去判断domain是否对应着相同的IP地址

　　　　因此就出现如下几种跨域情况：

 

 

URL	说明	是否跨域
http://www.a.com/a.js http://www.a.com/b.js	同protocol,domain,port	允许
http://www.a.com/a/a.js http://www.a.com/b/b.js	同protocol,domain,port,不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同protocol,domain,不同port（默认port：80）	不允许
http://www.a.com/a.js https://www.a.com/b.js	同domain,port,不同protocol	不允许
http://www.a.com/a.js http://192.168.82.45/b.js	同protocol,port,不同domain	不允许
http://www.a.com/a.js http://child.a.com/b.js	主域相同（a.com）,子域不同（www,child）	不允许
http://www.a.com/a.js http://a.com/b.js	一级域名相同，二级域名不同（同上）	不允许
http://www.a.com/a.js http://www.b.com/b.js	同protocol,port,不同domian	不允许

解决方法

......................................................................................................................................................................................
1.动态创建script标签

　　虽然浏览器默认阻止跨域请求，但是不阻止在页面中引用其他域的文件。

　　因此可以动态添加script标签。JSONP就是利用这一原理来实现ajax跨域的

 

2.通过修改docment.domain来实现跨域

　　该方法必须是在 同主域，不同子域的情况下才生效

　　比如：morningstar.com 和test.morningstar.com

只要把两个页面 的document.domain都指向主域就可以了，比如document.domain='morningstar.com'

 

3.通过HTML5 postMessage

　　不同域之间的跨域请求  使用postMessage。postMessage是HTML5新增的方法，简单易用高大上

　　比如：test.com 和qsstage.morningstar.com

.postMessage(message,targetOrigin)参数说明

message: 是要发送的消息，类型为 String、Object (IE8、9 不支持)
targetOrigin: 是限定消息接收范围，不限制请使用 '*'

'message',function(e)回调函数第一个参数接受Event对象，有三个常用属性：

data: 消息
origin: 消息来源地址
source: 源 DOMWindow 对象

一个简单的父页面qsstage.morningstar.com/parent.html 和子页面 test.com/test.html建立通信

>

window.addEventListener('message', function(e){
    console.log('foo say: ' + e.data.a);
    e.source.postMessage('get', '*');
}, false)

 

  

 

4.iframe+location.hash解决跨域

　　利用代理页面来解决HTML iframe跨域访问  使用location.hash.

　　通过URL传递数据。

　　结构关系：chart/com

                      ---parent.html

                      ---poxy.html

　　　　　　test.com

                　　---child.html

一个简单的父页面chart.com/parent.html 和子页面 test.com/child.html建立通信,通过chart.com/poxy.html实现跨域访问

 

 

 

        
我是子页面
    
    

 

转载于:https://www.cnblogs.com/thonrt/p/5978082.html