Posted
on 2010年08月23日, 1:23 下午,
by amanda,
under
生活.
去世博,真的需要耐心,还有毅力。
老天给了我们一个阳光明媚的天气,偶尔还会有丝丝凉风,可是馆外等候的人,足以改变温度。
今天到公司,听同事说,上个周末,世博人数突破51w,想想,我们还真会选日子,选了个全民都喜欢的日子。可惜我们没有去成中国馆,当我们进园的时候,连中国预约倦的影子都没见到,却已被告知,已经发放完毕。不过,总算能去观看到台湾馆,那也算是安慰了。虽然预约倦等了4个小时才拿到,进馆等了1个小时,不过总算觉得还值得,虽不是那么的华丽,确很用心,很真诚。
一天,我们就去了4个馆,尼泊尔,法国,德国,还有台湾馆。尼泊尔显得很传统,看不出现代的气息,雕刻师满精细,手工艺不错。法国馆,感性生活,到底是浪漫国度,一进馆内,真是,内与外完全不 一样,绿色的园艺打造的非常的舒心祥和,很闲适。德国馆,宣传的真实不错,我们排队4个多小时才进了馆,现代感非常的强,也很用心,动力之源,互动的也很不多。最后一站,我们的台湾馆。进那4维的世界,真的很不错,虽然馆不是很大,每次只能进30多个人,但是进去了,觉得还是很值得。
排过世博的队,相信以后排其他什么队,也不会惧怕了,还有什么会比这个还长呢?
Posted
on 2010年08月1日, 9:49 下午,
by amanda,
under
生活.
今天本来是为妹妹去激活卡的,顺便帮她办理短信业务,结果不可以代办短信业务,需要本人亲自办理。想想这大热天的,也不能就这么白白的跑来一趟,顺便想办理一下理财业务。
想想每月的零花钱,正在呈上升趋势,自认为控制力还可以的,但是也怕会有刹不住的时候,正好看到一款零花钱够抵挡的产品,哈哈,就签了这个。虽说回报没有什么,但是那可以定在那,想要安享晚年,现在不得不提前计划着。
我的百岁梦,应该会实现的,我在努力着呢。
Posted
on 2010年06月20日, 4:35 下午,
by amanda,
under
生活.
喜欢悦耳的声音已经很多年,记不住是从何时有这喜好,到如今依旧还是,而且越发的有点痴迷。
有人说,我们不可以对天生的东西挑剔,因为那是我们所不能更改的,可是,我还是很痴迷,本不该对那些有所挑剔的,好在我还是忍受力足够强的,或者说大部分的声音还是能接受的。
我很喜欢动画里的声音,每到周末,完全沉醉其中,已成了习惯。在这不是多姿的生活里,有了点点缀。
有很多,只因身在其中,却发觉不出美,偶尔闭上眼睛,用心去聆听,很是享受。
Posted
on 2010年05月5日, 10:15 下午,
by amanda,
under
零之amanda.
前言:因为工作需要,所以特此搜索互联网,终于找到些有意义的资料,特转载过来实践。
关于跨域这个话题,很早就答应过要分享,但是因为懒,一直拖着,直到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可以实现跨域传值实现跨域通讯。
缺点:对于父窗口URL参数动态生成的,处理过程比较复杂一些。并且IE之外的浏览器遇到hash的改变会记录历史,影响浏览器的前进后退功能,体验不佳。
演示:[ 点此阅览 ]
子页面在主域:www.lzdaily.com下,在页面中添加如下代码,因为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>
主页面在主域:
www.ioldfish.cn下,在页面中添加如下代码,首先取得子页面传递过来的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参数动态生成的,处理过程比较复杂一些。
演示:[ 点此阅览 ]
子页面在主域:www.lzdaily.com下,在页面中添加如下代码,首先在页面里添加一个和主页面同域的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>
主页面在主域:
www.ioldfish.cn下,在页面中添加如下代码,获取从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>
方案五、JSONP
原理:有点脚本注入的味道
缺点:服务器端程序运行比脚本早,跨域交互时无法捕获前端页面元素的相关数据,比如自适应高度。
演示:[ 点此阅览 ]
主页面在主域:www.ioldfish.cn下,在页面中添加如下代码,动态创建一个script,然后指定到子域的动态文件,在动态文件后面可以添加参数,在这里我加了一个回调函数,当请求返回后,会运行这个回调函数。
<script type=”text/javascript”>
function loadContent()
{
var scriptDom=document.createElement(’script’);
var url = “http://www.lzdaily.com/domain/jsonp/Test.aspx?f=setDivContent’”;
scriptDom.src= url;
document.body.appendChild(scriptDom);
}
function setDivContent(love)
{
var fishDiv = document.getElementById(“oldFish”);
fishDiv.innerHTML = love;
}
</script>
子页面在主域:
www.lzdaily.com下,在页面中添加如下代码,首先先取得主页面传过来的回调函数名,然后生成一段javascript代码,以回调函数带参数的形式返回主页面,这样就完成了跨域之间的通讯。由于服务器端程序执行总是优先于javascript代码,所以基本上没办法获取到子页面中DOM的相关数据,所以小白同学,我可以很负责人的告诉你,想通过这种方法实现跨域自适应高度是不可能的!
<script language=”C#” runat=”server”>
void Page_Load(object sender, EventArgs e)
{
string f = Request.QueryString["f"];
Response.Clear();
Response.ContentType = “application/x-javascript”;
Response.Write(String.Format(@”{0}({1});”, f,1122));
Response.End();
}
</script>
方案六、window.name
原理:window.name本身并不能实现跨域,只是中间做了代理。
缺点:获取异域的前端页面元素值有一定局限性,比如取自适应高度的值。但是此方法在前端页面元素的数据交互上明显比JSONP强。
演示:[ 点此阅览 ]
这个方案,YAHOO的同事已经给出了详细的demo,我就不重复了,演示demo出自YAHOO克军之手。详细的说明可以参看“怿飞的BLOG”,个人觉得方案四比window.name适用面更广一些。
方案七、window.navigator
原理:window.navigator这个对象是在所有的Iframe中均可以访问的对象。应该是IE的一个漏洞!
缺点:不支持IE外的浏览器下的跨域。严格的dtd申明后,该方法失效!
演示:[ 点此阅览 ]
主页面在主域:www.ioldfish.cn下,首先先申明一个Json用来保存所有页面的高度window.navigator.PagesHeight={“”:0};,然后根据name的属性找到页面的数据window.navigator.getData,最后将页面的数据注册到window.navigator.PagesHeight中。这里还定义了一个函数resetIframeData,在页面加载的时候调用它,完成跨域的数据交互。注释中详细说明了参数的作用。
<script type=”text/javascript”>
window.navigator.PagesHeight={“”:0};
window.navigator.getData=function(pageName) {
return window.navigator.PagesHeight[pageName];
};
window.navigator.putData=function(pageName,pageHeight)
{
window.navigator.PagesHeight[pageName]=pageHeight;
};
/*
*iframeId:页面中iframe的标识id
*key:子页面自定义的json标识,这里就是子页面定义的”PortalData”.
*defaultData:无法取到值时候调用
*/
function resetIframeData(iframeId,key,defualtData)
{
var obj=document.getElementById(iframeId);
if(window.navigator.getData)
{
var pageHeight = window.navigator.getData(key);
if(pageHeight && String(pageHeight).match(/\d+/))
{
obj.style.height=pageHeight+’px’;
}
else
{
obj.style.height=defualtData + ‘px’;
}
}
else
{
obj.style.height=defualtData + ‘px’;
}
}
</script>
子页面在主域:
www.lzdaily.com下,获取到页面高度后,将高度存到主页定义的Json中,Json标识为”PortalData”,这里可以自定义。
<script type=”text/javascript”>
window.onload = function getPageData()
{
var pageHeight = document.body.scrollHeight;
if(window.navigator.putData)
{
window.navigator.putData(“PortalData”,pageHeight);
}
}
</script>