原创

解决跨域问题Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.

问题点:
在不同的端口号,甚至是不同的ip进行iframe嵌套的时候,在父页面调用子页面的方法的时候,会报错,是跨域问题
也就是说,我本项目的域名端口是http://192.168.254.11:8080,通过页面的iframe访问http://localhost:8080/test/,并接收http://localhost:8080/test/传过来的消息。
例如:<iframe width="100%" height="100%" frameborder="0" src="http://localhost:8080/test/"></iframe>
如果这是直接在子页面上调用parent.document.getElementById("parentUrl").value=''给父页面传值,就会出现跨域问题。

问题原因:
在不同端口号下,不能使用传统的iframe嵌套调用方法。
因为同源安全策略缘故,你不能用javascript访问一个<iframe>,对于同一源策略浏览器,阻止脚本尝试访问具有不同源的帧。
如果地址中至少有一个部分未保留,则认为来源不同,如果要访问iframe,协议、主机名和端口必须与域相同。

解决办法:
在父页面添加监听器,接收子页面的值:
window.addEventListener('message',function(e){
alert(e.data);
},false);

在子页面在要传值的地方调用以下语句传值:
window.parent.postMessage('值','http://192.168.254.11:8080');

后记:
其实跨域问题有很多解决办法的,常见的办法有:
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 nodejs中间件代理跨域
5、 postMessage跨域
6、 window.name + iframe跨域
7、 nginx代理跨域
8、 跨域资源共享(CORS)
9、 WebSocket协议跨域

本文链接地址:http://www.ysxbohui.com/article/134

正文到此结束