影の域 » JavaScript

KISSY DataLazyLoad组件之事件BUG

影之迷惑 — Fri, 24 Feb 2012 10:58:48 +0000

正在随手弄一Photo App，为了性能和效率，不得不使用LazyLoad，至此，为此BUG的浮现做好了铺垫。

为图快速制作出原型，暂且使用KISSY辅助开发，App自身只有一个重要需求：弹性、自适应。

所以，很自然的对 windows 对象做了 Resize Event 的监听处理。 %*……（*&*%%*……*（，(此处省略1000字)，coding-complete && unit-test-ok !

然后，准备添加 LazyLoad支持以提高体验和性能，降低成本。（殊不知，杯具就此发生）

）*）*（）……&（……&*%&**（此处省略1000字），coding-complete && unit-test-ok !

准备 save && comit, 随着不经意的窗口Scroll 到底部 & Resize ，我hold住了。。。。。

自适应能力貌似费了， &（*（）*——（——*）…………*（*（此处省略1W字）

好吧，我知道，一般都是我的问题，遂，加入以下调试代码块辅助检查：

window.addEventListener('resize', function(){ console.info('Native Resize Event fire !!') }, false);

。。。结果出乎意料，冇反应。

直觉告诉，应该是KISSY在跟我开玩笑。

可是，想不通，为什么窗口在冇完全Scroll到底之前（或者说最后一个图片未被LazyLoad加载之前），一切都那么和谐有序呢？

看来，Source 我不得不再一次的偷窥你了。 – -！

（&（*（）（——）（——…………*（*&（此处省略1W字）

经过排查，问题不在 KISSY.js 核心文件，so, 问题就极有可能存在与 DataLazyLoad 组件本身鸟。 - -!

终于，我找到了让我撕心裂肺的你，你藏的如此诡异，以至于无心者很难察觉你的存在：

var self = this, resizeHandler,
    // 加载延迟项
    loadItems = function () {
        self._loadItems();
        if (self._getItemsLength() === 0) {
            Event.remove(win, SCROLL, loader);
            Event.remove(win, RESIZE, resizeHandler);
        }
    },
    // 加载函数
    loader = S.buffer(loadItems, DURATION, this);

// scroll 和 resize 时，加载图片
Event.on(win, SCROLL, loader);
Event.on(win, RESIZE, function () { self.threshold = self._getThreshold(); loader(); });

从以上代码块，可以看出悲催的 resizeHandler 变量忘记赋值鸟！！！造成 Event.remove(win, RESIZE, resizeHandler) 的影响扩大到了全局，说白了，就是所有的resize 监听器都被瞬间释放鸟，世界清静了。。。。

既然，code里寻你千百行，我也不能让你就在那变量定义处。

fix 就很明了了：

Event.on(win, RESIZE, resizeHandler = function () { self.threshold = self._getThreshold(); loader(); });

为了直观，提供2个简易DEMO来对比。

原始BUG 修正后

标签：bug, dataLazyload, event, kissy, resize

移动 Web 开发平台 Rexsee 开源

影之迷惑 — Fri, 28 Oct 2011 09:30:04 +0000

国内移动Web开发平台Rexsee正式开源，其开发者社区也于本周上线。访问社区可以查看详细开发手册、API说明与示例以及全部源码，并可在线编译免费生成移动应用客户端。

伴随着HTML5的发展以及Web App的广受认可，基于Web的移动应用开发已经受到了技术厂商与开发者的普遍关注。大量的Web框架纷纷转投移动应用领域，近期反响最大的无疑是由 ExtJS、jQTouch 以及 Raphael合并而成的Sencha，以及被Adobe收购的PhoneGap。Mozilla也于上月宣布计划构建 WebAPI，用于在浏览器中调用移动设备功能。

基于类似的技术理念，国内的Rexsee团队已提供了整体的移动应用“开发平台”，并于今年5月开始面向企业级应用市场推广。

Rexsee产品以Webkit为内核，全面支持HTML5。通过扩展超过1500个API，以Javascript实现对移动终端的功能调用，强化HTML5在浏览器之外的移动终端功能实现。开发者可以使用HTML、CSS和Javascript快速实现移动应用，并通过原生化应用转换功能，直接生成应用程序。

不同于国际范围的其他移动Web开发框架，Rexsee并不过度追求跨平台特性。在深度支持Android原生功能的前提下，采用全部同步的开发方式，并在执行效率上有显著提升。

Rexsee的开源策略旨在让更多的开发人员可以迅速的进入到移动互联网领域，基于标准化的Web开发方式快速实现移动应用。结合之前所积累的大量应用，Rexsee开发者社区在上线第一天，就已有246个应用得以审核推出，并且还在持续增加。

作为国内唯一开源的移动Web开发平台，Rexsee定位于服务移动应用开发者的技术平台提供方，力图为移动应用创新发展打造更加广泛坚实的开发者基础。

原文： http://www.oschina.net/news/22624/raxsee-opensource

标签：android, ios, open, Rexsee, source, web

[转]利用跨域资源共享（CORS）实现ajax跨域调用

影之迷惑 — Fri, 15 Jul 2011 05:14:06 +0000

几年前，网站开发者都因为ajax的同源策略而撞了南墙。当我们惊叹于XMLHttpRequest对象跨浏览器支持所带来的巨大进步时，我们很快发现没有一个方法可以使我们用JavaScript实现请求跨域访问，对此我们哀叹不已。每个人在他们自己的网站上建立代理（which was the onset of a new host of open redirect problems）来摆脱这种限制。虽然开发者利用服务器代理和其它技巧避开了这种限制，而在社区的抗议者允许ajax在本地跨域调用。许多人还没意识到当前几乎所有的浏览器（Internet Explorer 8+， Firefox 3.5+， Safari 4+和 Chrome）都可通过名为Cross-Origin Resource Sharing的协议支持ajax跨域调用。

跨域资源共享（CORS）

Cross-Origin Resource Sharing (CORS)是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。

对一个简单的请求，没有自定义头部，要么使用GET，要么使用POST，它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部（协议，域名，端口），这样服务器可以很容易的决定它是否应该提供响应。

Origin: http://www.nczonline.net

如果服务器确定请求被通过，它将发送一个Access-Control-Allow-Origin头部响应发送请求的同一个源，如果是一个公共资源，则返回“*”。如：

Access-Control-Allow-Origin: http://www.nczonline.net

如果头部丢失，或者源不匹配，那么浏览器将拒绝请求。如果一切顺利，浏览器将处理请求。注意，请求和响应都不包括cookie信息。

先前提到的所有浏览器都支持这些简单的请求。FF3.5 +，Safari 4和chrome通过使用XMLHttpRequest对象支持其使用。当尝试在不同域打开一个资源时，不需任何代码，这个行为会自动触发。如：

var xhr = new XMLHttpRequest();
xhr.open("get", "http://www.nczonline.net/some_resource/", true);
xhr.onload = function(){  //instead of onreadystatechange
    //do something
};
xhr.send(null);

在IE8中也是一样，用同样的方式你需要使用XDomainRequest object。

var xdr = new XDomainRequest();
xdr.open("get", "http://www.nczonline.net/some_resource/");
xdr.onload = function(){
    //do something
};
xdr.send();

Mozilla小组在他们关于CORS的留言中建议应该检查withCredentials属性的存在性，从而决定浏览器是否通过XHR支持CORS。你可以合并XDomainRequest 对象的存在性来支持所有的浏览器：

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

var request = createCORSRequest("get", "http://www.nczonline.net/");
if (request){
    request.onload = function(){
        //do something with request.responseText
    };
    request.send();
}

Firefox, Safari, 和Chrome的XMLHttpRequest对象与IE的XDomainRequest对象有着相似的充分的接口，这些模式运行的很好。常见的接口属性/方法:

abort()——用来终止已在进程中请求。
onerror()——替代onreadystatechange方法来探测错误。
onload()——替代onreadystatechange方法来探测成功。
responseText——用来取得响应地文本。
send()——用来发送请求。

Preflighted请求

除了GET或POST，通过一种称之为preflighted请求的服务器透明验证机制，CORS允许使用自定义的头部和方法，以及不同主体内容类型。当你尝试使用高级选项中的一个来试着建立一个请求时，这时就建立了一个preflighted请求。该请求使用可选的方法，并发送如下头部：

Origin——与简单请求相同。
Access-Control-Request-Method——请求将要使用的方法。
Access-Control-Request-Headers——（可选）一个逗号分开的正被使用的自定义头部列表。

例子假定一个头部自定义为NCZ的POST请求：

Origin: http://www.nczonline.net
Access-Control-Request-Method: POST
Access-Control-Request-Headers: NCZ

在请求期间，服务器能决定是否允许这类请求。服务器通过在响应中发送以下头部来与浏览器通信。

Access-Control-Allow-Origin——与简单请求相同。
Access-Control-Allow-Methods——用逗号分开的可接受的方法列表。
Access-Control-Allow-Headers——用逗号分开的服务器可接受的头部列表。
Access-Control-Max-Age——preflighted 请求应该被缓存的时间。

如：

Access-Control-Allow-Origin: http://www.nczonline.net
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: NCZ
Access-Control-Max-Age: 1728000

preflighted 请求一旦作出，结果将按响应中规定的时间缓存下来；第一次做出这样的请求，你将引发一次额外的HTTP请求。

Firefox 3.5+, Safari 4+和Chrome都支持preflighted 请求，IE8则不支持。

Credentialed请求

默认状态下，跨域请求不提供证书（cookie、HTTP身份验证、客户端SSL证书）。你可以规定一个请求应该通过设置withCredentials属性为true来发送证书。如果服务器允许credentialed请求，那么它将用下面的头部作出响应：

如果一个credentialed请求被发送，这个头部不会作为响应地一部分被发送。浏览器不会将响应传递给JavaScript(responseText是一个空字符串，状态为0，onerror()被调用)。注意，服务器也能发送这个HTTP头部作为preflight响应的一部分，以此来表明该源允许发送credentialed请求。

Access-Control-Allow-Credentials: true

IE8不支持withCredentials属性，Firefox 3.5+, Safari 4+和Chrome都支持它。

结论

在现代web浏览器中对跨域AJAX调用有许多可靠地支持，然而，大多数开发者仍没意识这些强大的功能力。只需在JavaScript和服务器端做一点额外的工作以保证正确的头部被发送即可使用它。在允许高级请求和credentialed请求方面，IE8的执行有些滞后，但希望它对CORS的支持将会继续改进。如果你想了解更多，我强烈建议你检查Arun Ranganathan的示例页。

window.open() 之句柄保持和重连

影之迷惑 — Thu, 14 Jul 2011 09:21:50 +0000

window.open()是挺常用的弹窗方式，大部分时候用在一些会话框提示、上传、第三方应用交互等，这时若需要面对资源保持的问题时，就需要一些特殊的技巧来fix。

通常window.open 子页面的方式为：

childWinHandler = window.open(‘child.html’, ‘childWinName’, ‘height=100,width=100′);

这种方式的弹窗，在保证父页面不会被重定向或 reload的前提下，就不用担心子页面窗口的句柄引用问题。

因为父亲页面中的 childWinHandler 变量存储着子页面窗口句柄的对象引用。

但，若父页面因为某些原因临时重定向走了而后再回来了（或 reload/refresh了），这时子页面窗口句柄对象的引用就彻底丢失了。

如果，当前应用是个第三方登录接入或者级别较重要的应用的话，这样的问题可能会带来很多不必要的麻烦。

so, 如何解决呢？

google + 试验，以下是个值得参考的方案（支持 IE6+，FF, Chrome, Safari 等）

window.open() 之句柄保持和重连

【点击查看DEMO】

原理很简单：

在 window.open(‘child.html’, ‘子窗口名’,'窗口参数’) 子页面前，先 window.open(”, ‘子窗口名’,'窗口参数’) 空页面，

注意第一个参数是空字符串，这样调用后，只需要通过判断返回的句柄对象的 location.href 是否为子页面地址，

就可以判断出当前窗口句柄保持的是否是之前的子页面窗口。

若是，则无需再open，直接focus即可。

若不是，则放心的重新open子页面窗口，即可。

问题：

经过测试

IE6，在保证父页面不close的前提下，一切工作正常。但是父亲页面要是关闭后再重新打开，这时无法让子页面focus置顶，而且

这时以后若关闭子页面父页面内的 openWinHandler 变量的访问直接抛异常，导致无法走通open流程。

而 chrome 稍稍比IE6好一些起码不抛异常，只是父窗口关闭后，就好像再也找不到之前的那个窗口句柄，会再新开子窗口，貌似引用资源被释放一样。

其他浏览器，由于时间有限，就没仔细测试，也许还有遗漏的地方，若发现请反馈告诉我，谢谢。

总结：

在某些条件下，这种方式不乏是个折中的可参考方案。

参考：

http://josephj.com/entry.php?id=367

http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/48485/page2

标签：JavaScript, js, open, opener, references, window

Windows7下搭建Node.js环境

影之迷惑 — Wed, 06 Apr 2011 08:34:18 +0000

1. 下载并安装Cygwin 及Node.js安装依赖的附加组件

cygwin下载: http://cygwin.com/setup.exe (下载点最好选择台湾或日本的临近点，速度快)

附加组件选择:

Devel :
gcc-g++: C++ compiler
gcc-mingw-g++: Mingw32 support headers and libraries for GCC C++
gcc4-g++: G++ subpackage
git: Fast Version Control System – core files (github方式下载时用)
make: The GNU version of the ‘make’ utility
openssl-devel: The OpenSSL development environment
pkg-config: A utility used to retrieve information about installed libraries
zlib-devel: The zlib compression/decompression library (development)

Editor:
vim: Vi IMproved – enhanced vi editor

Python:
全部

Web:
wget: Utility to retrieve files from the WWW via HTTP and FTP
curl: Multi-protocol file transfer command-line tool

2. 由于操作系统为 windows 7 (Windows Vista以后版本)，需要在ash模式下执行rebaseall才能保证 node.js的编译通过

a. 进入 cygwin安装目录/bin/
b. 运行ash.exe
c. 执行./rebaseall -v 命令
d. 正常情况下就OK通过，而我编译出现错误，提示系统临时目录无写入权限
e. 我编译出现错误，提示系统临时目录无写入权限，遂，手动修改了 rebaseall 文件的 83行处代码，如下：

# TmpDir="${TMP:-${TEMP:-/tmp}}"
TmpDir="D:/servers/cygwin_local/temp"

3. 启动cygwin下载 node.js源码编译并安装

$ cd /
$ git clone git://github.com/joyent/node.git
$ cd node
$ ./configure
$ make
$ make install

4. 设置DNS

cygwin内部使用windows的DNS查询，且node.js采用c-ares函数库，而c-ares函数库读取的 /etc/resolv.conf 里的nameserver配置，

所以需要手动建立 /etc/resolv.conf , 并增加以下nameserver 来让node.js执行网络操作时正常运行：

$ vi /ect/resolv.conf

nameserver 8.8.8.8
nameserver 8.8.4.4

5. 测试node.js环境

查看下 node安装信息：

node --version

写个简单的 Http Server来测试下node.js环境，保存一下代码为/worksapce/test.js：

var http = require('http'), port = 8888;

http.createServer(function (request, response) {
response.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8;' });
response.end('你好世界！');
}).listen(port);

console.log('服务已启动 http://127.0.0.1:' + port + '/');
$ node /workspace/test.js

开打浏览器访问 http://127.0.0.1:8888 查看效果

标签：cygwin, js, node, nodejs, win7, windows

HTML5 canvas 初级入门教程

影之迷惑 — Sun, 20 Mar 2011 11:38:24 +0000

HTML5 canvas 即HTML5画布，是一个现代浏览器都支持的HTML5非插件绘图的功能，本文将展示如何通过HTML5 canvas API操作canvas元素、绘制图形、改变绘图颜色以及删除图形，让我们开始进入这很酷的新技术的短暂旅行吧。

canvas元素简介

使用canvas元素相当简单，它只是一个单纯的HTML标签，外加宽高两个特性。

上面的代码在页面中插入了一个透明的画布，canvas元素内部的内容可以在不支持canvas功能的浏览器下显示你想给你的用户提供的信息，联想下

The Birth of Jesus Christ–>

In those days a decree went out from Caesar Augustus that all the world should be registered. This was the first registration when Quirinius was governor of Syria. And all went to be registered, each to his own town. And Joseph also went up from Galilee, from the town of Nazareth, to Judea, to the city of David, which is called Bethlehem, because he was of the house and lineage of David, to be registered with Mary, his betrothed, who was with child. And while they were there, the time came for her to give birth. And she gave birth to her firstborn son and wrapped him in swaddling cloths and laid him in a manger, because there was no place for them in the inn.

The Shepherds and the Angels–>

And in the same region there were shepherds out in the field, keeping watch over their flock by night. And an angel of the Lord appeared to them, and the glory of the Lord shone around them, and they were filled with fear. And the angel said to them, Fear not, for behold, I bring you good news of great joy that will be for all the people. For unto you is born this day in the city of David a Savior, who is Christ the Lord. And this will be a sign for you: you will find a baby wrapped in swaddling cloths and lying in a manger. And suddenly there was with the angel a multitude of the heavenly host praising God and saying,

Glory to God in the highest,

and on earth peace among those with whom he is pleased!

When the angels went away from them into heaven, the shepherds said to one another, Let us go over to Bethlehem and see this thing that has happened, which the Lord has made known to us. And they went with haste and found Mary and Joseph, and the baby lying in a manger. And when they saw it, they made known the saying that had been told them concerning this child. And all who heard it wondered at what the shepherds told them. But Mary treasured up all these things, pondering them in her heart. And the shepherds returned, glorifying and praising God for all they had heard and seen, as it had been told them.

运行代码

HTML5 canvas
支持浏览器：IE以外所有新锐浏览器

canvas by 司徒正美

Canvas

运行代码

https://developer.mozilla.org/en/Canvas_tutorial

HTML5 SVG
支持浏览器：Firefox 1.5+, Safari 3.0+, Chrome 1.0+, Opera 9.0+

http://www.w3.org/TR/SVG12/

http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id=84896

HTML5 XMLHttpRequest 2与跨域
支持浏览器：IE8与firefox3.5+各实现了部分

http://www.w3.org/TR/XMLHttpRequest2/

https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress

http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

http://www.w3.org/TR/cors/

https://developer.mozilla.org/En/HTTP_Access_Control

http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

HTML5的标签变更情况：

http://www.w3schools.com/html5/html5_reference.asp

——————————————————————————–

上述特征的支持情况只对目前有效……

标签：ecmascript5, html5

javascript中的Get/Set访问器

影之迷惑 — Sun, 20 Mar 2011 09:13:23 +0000

JavaScript中的Get和Set访问器，和C#中的访问器非常相似。

标准的Get和Set访问器的实现

在如下浏览器能正常工作：

我们常用的实现方法可能是这样的：

function Field(val){
var value = val;

this.getValue = function(){
return value;
};

this.setValue = function(val){
value = val;
};
}
var field = new Field(“test”);
field.setValue(“test2″)
field.getValue() // return “test2″

在DOM元素上Get和Set访问器的实现

HTMLElement.prototype.__defineGetter__(“description”, function () {
return this.desc;
});
HTMLElement.prototype.__defineSetter__(“description”, function (val) {
this.desc = val;
});
document.body.description = “Beautiful body”;
// document.body.description will now return “Beautiful body”;

在如下浏览器能正常工作：

通过Object.defineProperty实现访问器
将来ECMAScript标准的扩展对象的方法会通过Object.defineProperty来实现，这也是为什么IE8就是通过这种方法来实现get和set访问器，看来微软还是很有远见的，遗憾的是目前只有IE8+和Chrome 5.0+支持，其它的浏览器都不支持，而且IE8+也只支持DOM元素，不过将来的版本将和Chrome一样支持普通的Javascript对象。
DOM元素上的Get和Set访问器的实现

Object.defineProperty(document.body, “description”, {
get : function () {
return this.desc;
},
set : function (val) {
this.desc = val;
}
});
document.body.description = “Content container”;
// document.body.description will now return “Content container”

在如下浏览器能正常工作：

普通对象的Get和Set访问器的实现

在如下浏览器能正常工作：

本文总结

尽管微软的IE只是支持了Object.defineProperty，没有完美的实现Get和Set访问器，但是我们已经看到了IE有了很大的进步，特别是刚发布的IE9使用的新的javascript引擎，支持HTML5和CSS3，支持硬件加速等等，相信有一天各个浏览器都能完全拥抱标准，带来一个完美的WEB世界。

参考文献：

1. Getters and setters with JavaScript
2. JavaScript Getters and Setters

标签：get, set, 访问器

IE9允许前端开发获取到页面性能数据

影之迷惑 — Sun, 20 Mar 2011 08:25:53 +0000

长期以来，为了改善站点的用户体验，我们一直都是在页面顶端加上一个 (new Date()).getTime() 来获取用户打开页面的时间，使用httpwatch来分析页面打开的解释时间。httpwatch虽然强大，但是还是无法让我们深入到用户的环境去了解用户打开页面前的一些情况，例如:DNS解释时间，请求和响应时间，以及更加深入的页面渲染时间等重要信息。这些信息对用户环境分析是至关重要的。

如今，这个情况即将改变，微软的IE9将给前端开发们提供有力的性能分析接口让我们能够深入分析页面的性能，这就是强大的msPerformance接口。这个接口其实是基于HTML5草案Web Timing的定义来开发的（有意思的是这个接口是google提供的，chrome目前还没支持，IE9先行了）。

我们来看看通过Web Timing我们可以获取到什么数据

window.msPerformance.navigation

{

requestCount : 76

type : 0

startTime : 1277821481923

redirectedCount : 5

uniqueDomains : 31

}

window.msPerformance.timingMeasures

{

request : 22

domContentLoaded : 342

response : 10

firstPaint : 29

domInteractive : 342

msStyleContentLoaded : 342

fetch : 459

domComplete : 342

load : 89

connect : 3

}

window.msPerformance.timing

{

domLoading : 1277821481950

responseEnd : 1277821481960

navigationStart : 1277821481923

fetchStart : 1277821481923

msStyleContentLoaded : 1277821482293

firstPaint : 1277821481952

fullyLoaded : 0

requestStart : 1277821481927

loadEnd : 1277821482383

unloadStart : 1277821481923

}

通过这些数据我们可以更加深入得分析页面的性能和用户的网络环境，提供更加好的差异化服务。

到这里下载IE9预览版

发现IE9pre3的console列出的接口不全，直接用调试器把这个接口和方法全部列出来了，更加直观

标签：ie9, msPerformance

add bookmark for ie & ff & opera

影之迷惑 — Sun, 20 Mar 2011 07:38:03 +0000



添加百度到收藏

标签：bookmark, ff, ie, opera

原生JSON.parse解析异常问题

影之迷惑 — Fri, 18 Mar 2011 04:47:56 +0000

昨天开发新类库，做到Json模块，使用了json2官方类为底层，使用中频遇异常，甚是不爽。

看了下源码，json2 采用了优化处理机制，优先使用浏览器原生JSON处理。（事实是json自己的实现也如此）

而parse的处理验证机制很严格（也可称标准）：

// 不标准的格式, 键值缺少双引号
{ game : { id : 111, name : "test" } }

// 标准的格式
{ "game" : { "id" : 111, "name" : "test" }}

哎，无奈，遂改数据源之（别人系统，催之）。

待有时间，修改下源码，放松验证。

标签：js, json, parse, 异常, 标准, 验证

判断 iframe 是否加载完成的完美方法

影之迷惑 — Thu, 13 Jan 2011 07:23:58 +0000

网络看到，记录下。

一般来说，我们判断 iframe 是否加载完成其实与判断 JavaScript 文件是否加载完成采用的方法很类似：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == "complete"){
            alert("Local iframe is now loaded.");
        }
    };
}

document.body.appendChild(iframe);

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

document.body.appendChild(iframe);

几点补充说明：

IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

标签：iframe, iframe onload, onload

获取 Textarea 的光标位置

影之迷惑 — Thu, 13 Jan 2011 06:55:22 +0000

网络看到，记录下。

在任何编辑器中，获取光标位置都是非常重要的，很多人可能认为较难，其实只要处理好浏览器的兼容，还是比较容易实现的。

下面我们一起来看看如何获取到 Textarea 元素中的光标位置（测试地址）。

首先，我们用 rangeData 对象作为数据存储，并获得焦点：

var rangeData = {start: 0, end: 0, text: "" }; textarea.focus();

对于非 IE 浏览器获取选区的起始和末尾位置其实非常容易：

rangeData.start= el.selectionStart; rangeData.end = el.selectionEnd;

通过截取我们可以得到光标的选区内容：

rangeData.text = (rangeData.start != rangeData.end) ? el.value.substring(rangeData.start, rangeData.end): "";

而对于 IE 浏览器处理起来就比较麻烦了，但我们依旧可以获取到选区：

oS = document.selection.createRange();

同时还可获取 Textarea 元素的选区：

// 为了使 oR 与 oS 在同一等级上比较，请勿使用：oR = textarea.createTextRange() oR = document.body.createTextRange(); oR.moveToElementText(textarea);

如果光标在 Textarea 元素内，很自然 oS.text 就是我们需要的选区内容：

rangeData.text = oS.text;

并且我们可以通过 oS.getBookmark() 方法获取到选区的位置数据，该位置数据可以通过 moveToBookmark() 方法设置回去。

getBookmark: Retrieves a bookmark (opaque string) that can be used with moveToBookmark to return to the same range.

moveToBookmark: Moves to a bookmark.

我们用 rangeData.bookmark 来记录该位置数据：

rangeData.bookmark = oS.getBookmark();

下面是最重要的步骤：我们比较 oR 与 oS 的选区起始位置（使用 object.compareEndPoints(sType, oRange) 方法比较），如果 oR 的起始位置在 oS 之前，我们向前移动 oS 的起始位置1个字符（使用 object.moveStart(sUnit [, iCount]) 方法移动），一直当 oS 的起始位置在 oR 之前停止，移动的位置，则是选区的起始位置。

compareEndPoints: Compares an end point of a TextRange object with an end point of another range.

moveStart: Changes the start position of the range.

for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {} rangeData.start = i;

但由于在 IE 中，Textarea 元素中的所有换行符都占 1 个字符，可以通过 alert(textarea.value.length) 查看，故要对上面的代码做部分处理：

for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {     // Why? You can alert(textarea.value.length)     if (textarea.value.charAt(i) == '\n') {         i ++;     } } rangeData.start = i;

既然得到了选区的起始位置和选区字符串的字符，很自然我们可以计算得到选区的末尾位置：

rangeData.end = rangeData.text.length + rangeData.start;

获取 Textarea 的光标位置的 getCursorPosition 函数方法整理如下：

/** * getCursorPosition Method * * Created by Blank Zheng on 2010/11/12. * Copyright (c) 2010 PlanABC.net. All rights reserved. * * The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license. */ function getCursorPosition(textarea) {     var rangeData = {text: "", start: 0, end: 0 };         textarea.focus();     if (textarea.setSelectionRange) { // W3C         rangeData.start= textarea.selectionStart;         rangeData.end = textarea.selectionEnd;         rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";     } else if (document.selection) { // IE         var i,             oS = document.selection.createRange(),             // Don't: oR = textarea.createTextRange()             oR = document.body.createTextRange();         oR.moveToElementText(textarea);         rangeData.text = oS.text;         rangeData.bookmark = oS.getBookmark();         // object.moveStart(sUnit [, iCount])         // Return Value: Integer that returns the number of units moved.         for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {             // Why? You can alert(textarea.value.length)             if (textarea.value.charAt(i) == '\n') {                 i ++;             }         }         rangeData.start = i;         rangeData.end = rangeData.text.length + rangeData.start;     }     return rangeData; }

得到 Textarea 元素光标位置，当Textarea 中的光标丢失了，再设置回来就简单多了：

/** * setCursorPosition Method * * Created by Blank Zheng on 2010/11/12. * Copyright (c) 2010 PlanABC.net. All rights reserved. * * The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license. */ function setCursorPosition(textarea, rangeData) {     if(!rangeData) {         alert("You must get cursor position first.")     }     if (textarea.setSelectionRange) { // W3C         textarea.focus();         textarea.setSelectionRange(rangeData.start, rangeData.end);     } else if (textarea.createTextRange) { // IE         var oR = textarea.createTextRange();         // Fixbug :         // In IE, if cursor position at the end of textarea, the setCursorPosition function don't work         if(textarea.value.length === rangeData.start) {             oR.collapse(false)             oR.select();         } else {             oR.moveToBookmark(rangeData.bookmark);             oR.select();         }     } }

测试地址：http://www.planabc.net/demo/range/textarea-cursor-position.html

扩展阅读：

标签：cursor, range, textarea

如何获取当前 select 元素的值

影之迷惑 — Thu, 13 Jan 2011 06:44:39 +0000

网上看到，记录下。

1. 如果 select 元素下的所有 option 元素均没有指定 selected 属性，会默认选中第一个。
2. 可以通过 select.selectedIndex 获取到选中的 option 元素的索引。
3. 可以通过 select.options[select.selectedIndex] 获取到选中的 option 元素。
4. option 元素

，可以通过 option.value 获得 option 元素的 value 属性值，即 value3；可以通过 option.text 获得 option 元素内的文本，即 text3。
5. 如果 option 元素没有定义 value 属性，则 IE 中 option.value 无法获得，但 Safari、Opera、FireFox 依旧可以通过 option.value 获得，值同于 option.text 。
6. 可以通过 option.attributes.value && option.attributes.value.specified 来判断 option 元素是否定义了 value 属性。

故，获得当前 select 元素值的脚本如下：

var getSelectValue = function(select) {
var idx = select.selectedIndex,
option,
value;
if (idx > -1) {
option = select.options[idx];
value = option.attributes.value;
return (value && value.specified) ? option.value : option.text;
}
return null;
}

标签：option, select, select value option, value

影の域 » JavaScript

KISSY DataLazyLoad组件之事件BUG

相关推荐

移动 Web 开发平台 Rexsee 开源

相关推荐

[转]利用跨域资源共享（CORS）实现ajax跨域调用

跨域资源共享（CORS）

Preflighted请求

Credentialed请求

结论

相关阅读

相关推荐

window.open() 之句柄保持和重连

相关推荐

Windows7下搭建Node.js环境

你好世界！

相关推荐

HTML5 canvas 初级入门教程

canvas元素简介

Canvas

相关推荐

javascript中的Get/Set访问器

IE9允许前端开发获取到页面性能数据

add bookmark for ie & ff & opera

相关推荐

原生JSON.parse解析异常问题

相关推荐

判断 iframe 是否加载完成的完美方法

相关推荐

获取 Textarea 的光标位置

相关推荐

如何获取当前 select 元素的值