利用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>