搜索:
首页 >> JavaScript >> Js高级编程 >> 也来谈谈”完美”跨域

也来谈谈”完美”跨域

2008-12-19 作者:oldfish 来源:Alipay UED 投递文章

关于跨域这个话题,很早就答应过要分享,但是因为懒,一直拖着,直到D2上有人谈起了“完美跨域”。“跨域”应该已经算不上什么难题了,只是提起“完美”这两个字,突然觉得有了新意,那就写点什么吧,至少对自己有个交代嘛!跨域方案有很多,接下来一一枚举,会给出demo,demo的宗旨是尽可能简单的让新手明白,各方案中跨域的原理,实际应用请酌情修改。

方案一、剪贴板

原理:IE本身依附于windows平台的特性为我们提供了一种基于iframe,利用内存来“绕行”的方案,在这里我称之为,本地存储原理。

缺点:不支持非IE浏览器,并且影响到用户对剪贴板的操作,用户体验非常不好,特别是在IE7下,受安全等级影响,会弹出提示框。

演示:[ 点此阅览 ]

子页面在子域:demo.ioldfish.cn下,在页面中加入如下代码获取页面高度并存入剪贴板。

<script type="text/javascript"> 
var ua = navigator.userAgent; 
if ((i = ua.indexOf("MSIE")) >= 0)  

 var iObjH = window.document.documentElement.scrollHeight; 
 window.clipboardData.setData('text',String(iObjH)); 

</script>

在页面中加入如下代码,获取剪贴板的值并赋值为子页面所在的iframe的高度。

<script type="text/javascript"> 
window.onload = function() 

 var iObj =document.getElementById('iId'); 
 iObj.style.height=parseInt(window.clipboardData.getData('text'))+'px'; 

</script>

 

方案二、document.domain

原理:设置了document.domain,欺骗浏览器

缺点:无法实现不同主域之间的通讯。并且当在一个页面中还包含有其它的iframe时,会产生安全性异常,拒绝访问。

演示:[ 点此阅览 ]

子页面在子域:demo.ioldfish.cn下,在两个页面的头部都加入如下代码:

<script type="text/javascript"> 
 document.domain="ioldfish.cn"; 
</script>

 

方案三、通过JS获取hash值实现通讯

原理:hash可以实现跨域传值实现跨域通讯。

缺点:对于父窗口URL参数动态生成的,处理过程比较复杂一些。并且IE之外的浏览器遇到hash的改变会记录历史,影响浏览器的前进后退功能,体验不佳。

演示:[ 点此阅览 ]

在页面中添加如下代码,因为hash是不受跨域限制的,所以可以将本页面的高度顺利的传送给主页面的hash。

<script type="text/javascript"> 
 var hashH = document.documentElement.scrollHeight; 
 var urlA = "http://www.ioldfish.cn/wp-content/demo/domain/hash/a2.html"; 
 parent.location.href= urlA+"#"+hashH; 
</script>

在页面中添加如下代码,首先取得子页面传递过来的hash值,然后将hash值赋到子页面所在的iframe的高度上。

<script type="text/javascript"> 
window.onload = function() 

 var iObj = document.getElementById('iId'); 
 if(location.hash) 
 { 
  iObj.style.height=location.hash.split("#")[1]+"px"; 
 } 

</script>

方案四、传hash值实现通讯改良版

原理:该方案通过“前端代理”的方式,实现hash的传值,体验上比之方案三有了很大的提升。

缺点:对于父窗口URL参数动态生成的,处理过程比较复杂一些。

演示:[ 点此阅览 ]

在页面中添加如下代码,首先在页面里添加一个和主页面同域的iframe[也可动态生成],他的作用就像是个跳板。C页面中不需任何代码,只要确保有个页面就防止404错误就可以了!该方法通过修改iframe的name值同样可以跨域传值,只是比较”猥琐“而已。

<iframe id="iframeC" name="iframeC" src="http://www.ioldfish.cn/wp-content/demo/domain/hashbetter/c.html" frameborder="0" height="0"></iframe>

然后在页面中加上如下代码,利用页面C的URL接收hash值,并负责把hash值传给同域下的主页面。

<script type="text/javascript"> 
 hashH = document.documentElement.scrollHeight; 
 urlC = "http://www.ioldfish.cn/wp-content/demo/domain/hashbetter/c.html"; 
 document.getElementById("iframeC").src=urlC+"#"+hashH; 
</script>

在页面中添加如下代码,获取从C页面中传递过来的hash值。这里应用到一个技巧,就是直接从A页面用frames["iId"].frames["iframeC"].location.hash,可以直接访问并获取C页面的hash值。这样一来,通过代理页面传递hash值,比起方案三,大大提高了用户体验。

<script type="text/javascript"> 
window.onload = function() 

 var iObj = document.getElementById('iId'); 
 iObjH = frames["iId"].frames["iframeC"].location.hash; 
 iObj.style.height = iObjH.split("#")[1]+"px"; 

</script>

1   2 下一页 尾 页
相关文章
手机版 Js高级编程 Asp之家 Aspxhome.com
闽ICP备06017341号