反正乱拨 » JavaScript

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

Sway — Mon, 19 Jul 2010 12:54:08 +0000

这是一个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的可用性。当然，由于安全因素，此方法只适用于两个页面主域相同的情况。

用YQL帮助显示Twitter消息

Sway — Tue, 22 Dec 2009 11:33:44 +0000

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

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

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

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

对input 使用focus()函数(兼容Firefox和IE)

Sway — Sun, 29 Nov 2009 13:35:26 +0000

我们有时会有这样的需求：当页面加载完成后自动将光标定位到某个输入框上，起到引导和方便用户之功效，如谷歌首页、Gmail登陆界面等；原理较简单，通常可以用一段Javascript略微控制，如

...
window.onload = function(){
   document.getElementById('term').focus(); //假设页面中需要赋予焦点的input的id为'term';
 }
...

以上代码可以解决input框初始值为空的情况，假如初始值不为空，如我们引导用户输入一个网址，使初始值为’http://’，这时HTML可能是这样:

...

...

如果再试图用上面的Javascript代码来赋予焦点，会发现在Firefox下光标停在input框内文字的末尾，而在IE6下却停在了input框内文字的开头处，通常，Firefox的执行结果使我们所希望的。要想让IE6得到像Firefox一样的结果，以下是我的解决办法：

...
   window.onload = function(){
     var term = document.getElementById('term');
     term.focus();
     term.value = term.value;     //关键就是多加了这一句;
   }
...

跨浏览器Ext版网页漂浮广告JavaScript函数

Sway — Thu, 30 Jul 2009 14:50:58 +0000

今天浙大门户系统提出一个需求，用户登录后希望网页上可以漂浮一个小图片，提醒同学可以做在线咨询，我一听，这不就是本人最讨厌的网页广告吗，可没办法，人家给钱，你就是奴才。
在网上一搜，这类脚本铺天盖地，基本是一样的，纯JS写成，拷过来一用，静态页面时IE和Firefox都正常，改成JSP后在IE下还好，Firefox下就不行了，该飘的东西一动不动，改了半天没改出来，想想咱们门户每次加载都带上了Ext库，咱们也别浪费了，我就用Ext写了个跨浏览器的漂浮JavaScript函数，在JSP下通过IE、Firefox及Safari测试，Chrome应该也没问题。函数源码如下：

function floatInfo(id, distance, per){
   var flagH = 0;
   var flagW = 0;
   var distance4L = distance;
   var avaiH = document.body.clientHeight - id.getHeight();
   var avaiW = document.body.clientWidth - id.getWidth();
   var task = {run: function(){
                        id.setTop(id.getTop() + distance);
                        flagH += distance;
                        if(flagH >= avaiH || flagH <= (-avaiH)) {
                                distance = (-distance);
                                flagH = 0;
                        }
                       id.setLeft(id.getLeft() + distance4L);
                       flagW += distance4L;
                       if(flagW >= avaiW || flagW <= (-avaiW)) {
                       distance4L = (-distance4L);
                       flagW = 0;
                       }
                   },
                  interval: per
                }
  Ext.TaskMgr.start(task);
}

传入参数id代表网页上要漂浮元素的id；distance是数字，代表一次移动多少像素；per也是数字，代表多长时间移动一次，其中1000代表1秒，数字越小移动越快。使用方式如下：

虽然用Ext写这种东西是有点杀鸡焉用牛刀的味道，但谁叫本人对跨浏览器的脚本编程这么差呢。

关于IE和Firefox对Html引入外部文件的探查

Sway — Sun, 24 May 2009 13:49:33 +0000

前几天在学习Ext的时候，刚第一步就卡壳了，长时间连HelloWorld都没哈出来，好让我不郁闷。

情况：我把Ext的库解压缩放在F盘下的某个文件夹，然后在E盘某个文件夹下新建Html页面，并通过动态引入F盘下的Ext所需文件，准备实现个Helloworld，结果IE下成功了，Firefox下死活不行，至始至终报Function not defined。你说我没定义函数或路径错误吧，人家IE却找到了，所以我当时在想：难道是针对Firefox还需要引入别的其他Ext文件支持，这也太弱智了吧（Ext）。所以当时猜想会不会是Firefox不能识别跨盘路径，今天，花了本人宝贵的时间，终于得出结论了：
Firefox不是不支持跨盘路径，而是管你跨不跨盘，它根本就不支持带盘符的绝对路径名，例如“E:\folder1\folder2\test.js”是引入不了的，而以上这些在IE下都不是问题。
同样，经我测试，对于CSS文件的引入Firefox也存在这样的问题。

以上结论，本人并不能给出官方解释，而是通过实践得出的。有时候，实践还是可以得出些真理的。当然信不信有你。