iframe 跨越访问_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'

functionaa(str){

console.log(str);

}

window.onload = function(){

document.getElementById('ifr').contentWindow.bb('aaa');

}

functionbb(str){

console.log(str);

}

parent.aa('bbb');

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建立通信

var ifr = document.querySelector('#ifr');

ifr.contentWindow.postMessage({a: 1}, '*');

}

window.addEventListener('message', function(e){

console.log('bar say: '+e.data);

}, false);

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实现跨域访问

function callback(data) {

console.log(data);

}

window.onload = function () {

var data = location.hash.substr(1);

data = eval("(" + decodeURIComponent(data) + ")");

top.document.getElementById("test1").style.height = data.height + 'px';

//调用父页面方法，可不写

top.callback(data);

}

我是子页面

window.onload = function () {

if (!document.getElementById("crossFrame")) {

var iframe = document.createElement('iframe');

iframe.setAttribute('style', 'width:100%');

iframe.setAttribute('src', 'http://chart.com/poxy.html');

var height = document.documentElement.scrollHeight;

var data = '{height:' + height + '}';

//通过参数传递高度heights

iframe.src = 'http://chart.com/poxy.html#' + data;

document.body.appendChild(iframe);

} else {

document.getElementById("crossFrame").src = url;

}

}