也来谈谈”完美”跨域
作者:oldfish 来源:Alipay UED 发布时间:2008-12-19 12:34:00
关于跨域这个话题,很早就答应过要分享,但是因为懒,一直拖着,直到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>
猜你喜欢
- 总结了一下自己工作中使用到的注释书写规范,没有什么技术含量,只是用于统一制作方式,方便维护。包含了“区域注释”、“单行注释”、“注释层级”和
- 今年年初之时,微软发布了一个针对ActiveX控件的补丁,安装此补丁后的IE6中,当ActiveX控件获得焦点时,IE自动为其套上一个虚线矩
- 前两天在帮朋友整理他的主页空间时候,发现的一点关于MySQL可能大家都会忽略的问题:我们知道,在安装完MySQL后,它会自动创建一个root
- 如何要恢复Master数据库呢?方法1:重装SQL,但是数据就Over掉了方法2:重建Master Rebuildm.exe 用到SQL的安
- 在翻译这篇文章时我想起一件事情,去年有个朋友在网上非常兴致勃勃的和我说:“我弄了一个很酷的网站,去玩玩吧!真的不错哦!”,然后他把网址发给我
- ASP链接MSSQL2005的链接字符串如下:Provider=SQLNCLI;Server=.\SQLEXPRESS;Database=m
- 字符函数——返回字符值这些函数全都接收的是字符族类型的参数(CHR除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR
- 八卦是种优良品质,特别是用在技术上时。来看几个Reset CSS的八卦问题吧:你知道世界上第一份reset.css在哪么?*&nb
- 五花八门的SQL产品多得要命,或许你早顾不得其它甩开袖子就动手干了。但你要同时采用ASP和SQL的话就可能会头晕。MySQL、SQL Ser
- 很早就听说韩国网站的设计师们很会利用空间,来创造更多的信息承载量.最近浏览了几个韩国SHOPPING网站果不其然,就拿小小的广告轮播来说,非
- 昨天在网上看到一个防采集软件,说采集只访问当前网页,不会访问网页的图片、JS等,今天突然想到,通过动态程序和Js访问分别记录访问者的IP,然
- 一、“无”的哲学佛家讲究“因果报应”,有果必有应。此段看似与主题没有血缘关系,实际讲的是“因”。我个人比较喜欢老子的道家思想,并喜欢以其思想
- XML被设计用来描述数据,其焦点是数据的内容。HTML被设计用来显示数据,其焦点是数据的外观。  
- 近段时间由于修改一个ASP程序(有SQL注入漏洞),在网上找了很多相关的一些防范办法,都不近人意,所以我将现在网上的一些方法综合改良了一下,
- 通过锁机制,可以实现多线程同时对某个表进行操作。如下图所示,在某个时刻,用户甲、用户乙、用户丙可能会同时或者先后(前面一个作业还没有完成)对
- 说实话,对于移除这个旧有功能对于我来说,我是欢心鼓舞的。因为我在开发和应用当中一向不用expression来处理,虽然它确实是非常方便,比如
- 今天帮助同事解决一个问题,问题是她做的一套页面在FF下显示正常,在IE6下样式却没有效果,也就是没有应用样式。最终发现是编码不匹配的问题,c
- 权限级别划分如下:①、院长和财务科长:不能输入,可以无限制查询、统计;②、副院长:不能输入,可以查询、统计其分管部门的帐务;③、部门领导:不
- 假设你的变量叫做 MyArray,我们可作如下处理:Dim strDim strDelimiterstrDelimite
- 一个Link被点击之后有可能是打开新窗口,也有可能是刷新当前窗口,这两种打开方式一直并存于互联网中。 作为测试对象,于25日将打开方式改为‘