[收藏]也来谈谈”完美”跨域
前言:因为工作需要,所以特此搜索互联网,终于找到些有意义的资料,特转载过来实践。 关于跨域这个话题,很早就答应过要分享,但是因为懒,一直拖着,直到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> 主页面在主域:www.ioldfish.cn下,在页面中加入如下代码,获取剪贴板的值并赋值为子页面所在的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时,会产生安全性异常,拒绝访问。 演示:[ 点此阅览 ] 主页面在主域:www.ioldfish.cn下,子页面在子域:demo.ioldfish.cn下,在两个页面的头部都加入如下代码: <script type=”text/javascript”> document.domain=”ioldfish.cn”; </script> 方案三、通过JS获取hash值实现通讯 原理:hash可以实现跨域传值实现跨域通讯。 [...]