利用iframe解决跨域问题
iframe跨域
该图要解决的问题说明如下:
在AAA.com域名下的index.htm页面中内嵌了BBB.com域名下的一个页面index.htm,正常情况下iframe内部的index.htm页面是无法访问父页面index.htm中的任何dom对象或者js函数的,因为跨域,但我们经常又需要做一些参数回传的事情怎么办呢?以上的这种实现方式就很好的解决了这个问题;
解决方案的关键优雅之处在于:浏览器虽然会禁止js跨域访问页面中的对象,但对于iframe的层级关系引用并没有做限制,即parent仍然可用;该方案就是利用了2层内嵌iframe、使用第二级iframe中的页面与parent.parent的页面是同域名的关系,从而避免跨域问题实现两个页面间相关数据的传递,本质上就是利用parent.parent实现对父父页面中js的回调!
A域下的页面 enter.jsp
<script type="text/javascript" src="<%=basePath%>userindex/js/ui/jquery.js"></script>
<script type="text/javascript">
function process(par){
//种cookie
var strs = par.split("="); //字符分割
setCookie("cookiename",strs[1],'d30');
}
//程序代码
function setCookie(name,value,time)
{
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()+";path=/;domain=youku.com";
}
function getsec(str)
{
var str1=str.substring(1,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s")
{
return str1*1000;
}
else if (str2=="h")
{
return str1*60*60*1000;
}
else if (str2=="d")
{
return str1*24*60*60*1000;
}
}
</script>
<iframe id="aframe" src="http://www.BBB.com/getCookie.jsp" width="320" height="240"></iframe>
B域下的页面:getCookie.jsp
<script type="text/javascript" language="javascript">
function getCookie(c_name){
if(document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + "=");
if(c_start!=-1){
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if(c_end==-1) c_end=document.cookie.length;
//alert(unescape(document.cookie.substring(c_start,c_end)));
return unescape(document.cookie.substring(c_start,c_end));
}
}
}
(function(){
//动态创建iframe,利用iframe的src传递cookie值
var ifr = document.createElement("IFRAME");
document.body.appendChild(ifr);
ifr.src = 'http://www.AAA.com/pass.jsp?p='+getCookie("yktk");
})();
</script>
A域下的页面:pass.jsp
<script type="text/javascript" src="<%=basePath%>userindex/js/ui/jquery.js"></script>
<script type="text/javascript">
(function(){
//获取iframe的src中的参数
var paramUrl = window.location.search;
//调用iframe中的A域中的process方法,把参数传入,完成跨域
parent.parent.process(paramUrl);
})();
</script>
参考资料: http://blog.csdn.net/sfdev/article/details/5807045