利用iframe解决跨域问题
利用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>