从父窗口调用子窗口的方法

这是一个BOM问题,我这里指的子窗口(child window)是指从一个窗口通过window.open或iframe技术所创建的window对象,当然,父窗口(parent window)就是创建子窗口的原始窗口。网上总是有许多介绍从子窗口调用父窗口的方法的文章,但没有讲如何从父窗口调用子窗口方法,这里晒一晒最近做项目摸索出的小窍门,看代码吧:

    var childWin, interval,
    callFunc = function(){
           if(childWin.childFunc){   //childFunc表示试图调用的存在于子窗口的函数
                childWin.childFunc();
                window.clearInterval(interval);
           }
       };
   interval =  window.setInterval(callFunc,300);
   childWin = window.open('some-url', 'some-windowname');

由于window.open是异步执行的,子页面的加载需要一定时间,也就是说childFunc并不是马上就会出现,所以做了一个300ms的轮循来检查childFunc的可用性。当然,由于安全因素,此方法只适用于两个页面主域相同的情况。

My first Safari 5 bug

听说Safari5比Firefox快1倍,甚至比Chrome还要快一点(3%)。我也迫不及待地将Safari更新至最新版本(Safari for Windows)。最近试用时发现了一个bug,现发布在此,看看大家有无此现象。

该bug的现象是:通过与页面交互而产生的阻塞(block)窗口并不能阻止用户继续对页面内容进行操作,例如:在我的测试页面中,点击彩色的区块可以产生一个alert对话框,按照正确的处理方式,在关闭此对话框之前我们将不能对页面进行操作,然而事实不是这样,你仍然可以通过鼠标激发每个彩色区块的hover状态、可以继续点击彩色区块弹出alert对话框、可以点击页面上的链接(Link 1),你甚至可以穿过对话框点击一个看不见的链接(Link 2),不信你试试,很疯狂吧?目前我知道的能回到正常轨道的方法是:用鼠标点击一下页面上还没有绑定事件的区域。

我刚刚提到,这个bug的出现需要与页面交互,例如在页面加载完成后自动弹出的alert并没有问题;同时,这个bug同样存在于promt和confirm函数。

虽然alert、promt、confirm如今已经用得很少了,但当这个bug出现时,还是会造成更差的使用体验和安全隐患的。

无厘撞头

昨晚梦见自己埋头狂奔,结果头直接狠狠撞在墙上,疼痛感“由外及里,再由里向外”,相当逼真(小时候荡秋千,不幸绳索断了,头着地,也是这种感觉),甚至在我醒来后一段时间还在担心自己会不会被撞出脑震荡、撞成脑残,不过根据今天一天的表现,大脑工作还算正常。

基于以上这个扯淡的梦,我在想一件事:疼痛并不一定需要外界的刺激,比如想重温撞墙的感觉并不一定要去撞墙一样,疼痛过程完全可以被大脑记录下来,然后在特定情况下播放即可重演疼痛感觉,或许其他知觉也同样适用于这种猜想。这有点像计算机的宏,可录制,可重复播放。

看起来不错,我突然有种科学家的感觉,不过以上猜想基于本人是梦见撞墙的事实,那万一我是真的撞墙了呢?比如梦游的时候。你别较真,都说了是个扯淡的梦……

IE6 resize event bug 解决方案

最近写组件时碰到一个问题:对window对象监听resize事件,当浏览器窗口大小发生改变时,在IE6和IE7下监听函数会被执行多次,这与我们期望的执行一次可不吻合。更可怕的是,在某些DTD下,DOM中某个元素区块的大小发生变化时也会激发window的resize监听函数,且在IE6和IE7下看我的例子。在这个例子里,当点击”Zoom In”或”Zoom Out”改变红框大小时,激发了window的resize事件,不过元素的位置移动不会导致这个bug,不信点击”Move”按钮移动绿框试试,以上这些奇怪的效果IE7同样存在。至于浏览器窗口大小发生改变时监听函数反复执行的错误就与DTD没有关系了。为了防止函数多次执行,每次window的resize事件发生时,我们可以判断一下浏览器窗口大小是否改变了,只有真的改变时我们才执行监听函数,Javascript代码大概会是这样:

...
var width = document.documentElement.clientWidth,
     height = document.documentElement.clientHeight;
window.onresize = function(){
	if(width != document.documentElement.clientWidth ||
           height = document.documentElement.clientHeight){
		resizeFunc();
	}
	width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
}
...

为什么不加一个浏览器检测呢,那样在非IE浏览器下就可以用常规写法了。可是据我测试,风头不小的Chrome也会犯这个错误。所以,还是以防万一吧。

现实照进梦乡

湖滨猜想

杭州的公交编号用K开头,估计就是传说中的快速公交,但可不快;红绿灯不喜欢提示你时间,就是那种倒数装置,我很奇怪,杭州人民怎么都能感觉到呢?杭州有一个公交站叫湖滨,我和Shirley走在湖滨的街头有莫名的恐惧感,深怕遇见胡斌,别说红灯亮时不敢移动半步,绿灯亮了也得“左顾右盼”,过马路俨然成为我们的一大难题;然而事实并非想象的那样可怕,因为街上勇闯红灯横穿马路的大有人在,并且都是些中老年选手,他们从不“左看看,右看看”,却能轻松到达左岸。我是一个爱观察的人,这一颠覆老师教导的现象立刻引起了我的注意:能否顺利通过马路与遵守红绿灯之间并不存在直接关系,根据统计分析,与试图通过马路的试验者的年龄有一定的关系。这姑且命名为湖滨猜想。

“鸡鸭鱼肉”歌

窗外的“鸡鸭鱼肉”歌将我从梦乡照进现实,“鸡鸭鱼肉”歌?就是周立波扮演的周立波在《一周·立波秀》中演唱的那段原创昆曲,当然也是我的第一首听清了歌词大意的昆曲。根据考证,由于小区里某人不幸离世,家人请来了“国家一级演员、国家二级演员”(报幕员原话),声音之大让我怀疑他们家是不是动用了小区里的广播系统。okay,本人头一次体会这样的东部风俗,除了不能与他家人一起感到悲伤以外,其他一切照旧。

明天要去公司报到了,天还是在下雨。

友情链接一二

今天一起将老友棉胎和Blues的blog链接更新了,棉胎的blog其实前几天就上线了,重新改名叫“棉胎急呼SOS”,看得出这家伙必要看不住自己的嘴巴了;Blues的”Zen Log”名字很酷,Zen!

棉胎急呼SOS:http://www.bcxw.org

Zen Log:http://zenzlog.com

很高兴周围又有朋友加入了独立博客的生活。。。

用YQL帮助显示Twitter消息

我们经常看到一些Blog或者内容发布站点会将自己的Twitter消息显示在网站的某个位置(比如边栏),这些功能大多都是由后台程序(如PHP)来完成,若没有个人可管理的服务器或者不支持运行后台程序将无法使用;使用JavaScript版的则需要浏览器端能正常访问Twitter数据源,但由于某些网络原因也无法实现。

今天自己动手写了一个基于YQL和JavaScript的简单脚本,可以帮助人们实现显示个人Twitter消息的需求,本页面边栏的“Tweets”就是使用它来实现的。所以只要你的站点可以运行JavaScript,并且能访问YAHOO! API ;那么就放心地将下面的代码嵌入到你想在自己站点上显示Twitter 的地方吧,如下:

<script type=”text/javascript” src=”http://swayweb.com/labs/twitter_timeline.js”>id:swaydeng,limit:5,style:false</script>

其中’swaydeng’替换成你的TwitterId,limit代表你打算显示twitter的条数(小于等于20),style表示嵌入的twitter消息框是否需要加入CSS样式,目前是false。

就是这么简单,欢迎使用。

1px Dotted Border Bug In Chrome3.0

这是一个关于浏览器对CSS属性border的解析问题。在IE6下,当把边框(border-width)设置为1像素并且边框样式(border-style)设置为dotted时,IE6通常会渲染成虚线(dashed)而不是我们想要的点线(dotted),这就是古老的1px Dotted Border Bug In Internet Explorer 6,好消息是在IE6以后的版本里修复了这个bug。

然而最近做测试时发现,以上提到的IE6的bug很不幸地转移到了Chrome上,具体现象是:在Chrome3.0下,当把边框(border-width)设置为1像素并且边框样式(border-style)设置为dotted时,无论长短,线段中部都会有一段实线,只有当border-width大于1px时才正常,很奇怪;补充一点,同样使用WebKit引擎的Safari3.2并不存在这个错误。

本人的测试环境:操作系统是WinXp Pro,屏幕分辨率是1280×800,浏览器是Chrome3.0.195.33。我在想,这难道是Chrome的一个渲染bug?模仿IE,先称此bug为1px Dotted Border Bug In Chrome3。

测试页面(Test Page)