demo：http://www.css88.com/demo/css3-progress-bars/

英文原文：http://www.red-team-design.com/stylish-css3-progress-bars

HTML代码： HTML代码比较简单

1. .progress-bar – 定义进度栏的常规样式。
2. .blue – 定义进度条的风格，这里是蓝色的
3. .stripes – 当前进度的动画类型。
4. span – 填充进度条。内联设置的宽度，0%-100%，进度条的宽度。

CCS代码：

添加颜色，进度条风格：

条纹样式

闪烁样式：

发光样式：

在不支持css3的浏览器下的表现：

demo:http://www.css88.com/demo/css3-progress-bars/

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发 转载请注明转自《时尚的CSS3进度条》

实现布局有三个思路:

1. 最传统的思路,多弄几个容器,分几列,然后往每个列里面插入元素.其实用table分几列实现更加方便:P;
2. 使用html5中css3的多列布局来实现.参见w3c标准中的css3多列布局模块;
3. 使用绝对布局,通过javascript生成元素的布局位置.

前两种方法在网上都有比较详细的介绍,我这里就不再多说了,这里主要说一下我做的第三种实现的优缺点以及我的实现思路.

第三种方案是所有的要布局的元素都是绝对定位的,然后通过javascript来判断每个元素位置,动态设置位置实现布局.

缺点

需要使用javascript来遍历元素,然后要根据前一个元素来判断后一个元素的位置,这样可能对一些老版本的浏览器造成负担,特别是IE6这种 老古董,而且在javascript失效的时候,整个页面的布局都会乱掉.另外如果整个页面宽度是变化的,则可能每次窗口尺寸改变时都要重新计算所有元素 的位置,在页面中元素较多的时候可能会有闪烁的现象.另外如果页面中出现图片,则需要实现定义好图片的尺寸,否则会出现无法正确计算元素位置的情况.

优点

布局更加灵活,元素绝对定位,可以使用javascript灵活操作.页面宽度改变时可以重新布局整个页面.可以使页面的中的元素真正流动起来,让新添加的元素插入到高度最低的列,使页面的低端更加整齐,对插入的元素高地要求较低.可以较为方便的实现延迟加载.

具体实现

最开始我实现的时候是通过使用javascript生成虚拟的列,根据元素的顺序为每个元素分配一个列和行,然后计算每个元素的位置,举个例子,现在假设有四个列:

使其在页面中布局.事实上这个解决办法跟第一种和第二种是一个道理的.最后页面每列的高度差别可能会很大.

//getElements()方法用于获取页面中的元素
var items = getElements();
var columnCount = 4;
var columnWidth = 230;
var padding = 8;
//遍历所有元素
for(var i = 0, len = items.length; i < len; i++){
	//获取当前的元素
	var currentItem = items[i];
	//获取当前对象的列
	var currentColumn = (i + 1) % 4;
	//获取当前对象的行
	var currentLevel = parseInt(i / 4);

	//有了当前的行跟列可以根据上一层的对象计算出当前对象的高度
	var left = currentColumn * columnWidth;
	var top = items[i - 4] ? 0 : items[i - 4].style.top + items[i - 4].clientHeight + padding;
	//设置当前的位置
	currentItem.style.top = top + 'px';
	currentItem.style.left = left + 'px';
}

代码和逻辑都比较简单,根据当前的行跟列计算出位置就行了.但是这个逻辑还是会出现元素高地差距过大的情况.看一下新浪weibo的广场图片效果:

可以看到越到最后可能列高度之间的差距会越大.这不是我们想要实现的效果.

所以我这里换了一个思路,虚拟的列还是要有的,但是行的概念我们抛弃掉,我采用的是一个类似流动的概念,新插入的元素是根据每个列的高度,那个高度 最低就流向哪个列,最后确保每个列的高度都趋近一致,实现我们想要的效果.当然我们可以采取获取所有元素的高度,然后统一计算一下,获取一个最佳的排列方 法,但是这会给浏览器带来较大的计算量,而且如果不断的加载更多的图片我们会得不偿失,所以我们采用的是一个流动的模型,只让当前对象寻找最低的高度然后 插入.

这里我实现了一个Column对象,一个ImgItem对象.Column对象用于维护每一列的信息,包括列的最到高度列宽度等列信息.ImgItem对象保存了一个html节点对象,还有一些设置元素位置,获取当前元素位置的方法.

下面是Column对象的代码:

var Column = function(order){
	this.order = order;
	this.maxHeight = 0;
	this.columnWidth = 230;
	this.left = this.columnWidth * order;
	this.lastItem = null;
	this.positioned = false;
	this.setReferItem = function(item){
		this.lastItem = item;
	}

	this.getHeight = function(){
		if(this.lastItem){
			this.maxHeight = this.lastItem.getBottom();
		}
		return this.maxHeight;
	}

	this.getLeft = function(){
		return this.left;
	}
};

ImgItem对象的代码:

var ImgItem = function(referNode, column){
	this.referNode = referNode;
	this.bottom = -1;
	this.positioned = false;
};

ImgItem.prototype = {
	/*
	 *set the refer node's top
	 * @param value: Number
	 */
	setTop: function(value){
		this.referNode.style.top = value + 'px';
	},
	/*
	 *set the refer node's left
	 * @param value: Number
	 */
	setLeft: function(value){
		this.referNode.style.left = value + 'px';
	},
	/*
	 *get the refer node bottom position
	 */
	getBottom: function(){
		if(this.positioned){
			if(this.bottom < 0){
				this.bottom = parseInt(this.referNode.style.top) + this.referNode.clientHeight;
			}
			return this.bottom;
		}else{
			throw("current node has not been positioned!");
		}
	},
	setPosition: function(column){
		this.positioned = true;
		this.setLeft(column.getLeft());
		this.setTop(column.getHeight() + 10);
		column.setReferItem(this);
	}
};

基础打好了,下面要做的就是给元素进行布局了:

//首先根据配置信息中的列数初始化列
for(var i = 0, len = this.config.columnCount; i < len; i++){
	this.columns.push(new Column(i));
}
//获取页面上已存在的对象
var liItems = document.getElementById('img_list').getElementsByTagName('li');
//将所有的对象进行布局
for(i = 0, len = liItems.length; i < len; i++){
	this.addNewItem(liItems[i]);
}

好吧这里还用到了一个addNewItem方法:

getMinHeightColumn: function(){
	var minHeight = -1, tempColumn = null;
	//遍历所有的列,获取当前高度最低的列,并返回
	for(var i = 0,len = this.columns.length; i < len; i++){ 		if(minHeight > this.columns[i].getHeight() || minHeight == -1){
			minHeight = this.columns[i].getHeight();
			tempColumn = this.columns[i];
		}
	}

	return tempColumn;
},

getMaxHeight: function(){
	var maxHeight = -1;
	//遍历列对象,获取高度最高的列并返回高度
	for(var i = 0, len = this.columns.length; i < len; i++){
		if(maxHeight < this.columns[i].getHeight()){
			maxHeight = this.columns[i].getHeight();
		}
	}

	return maxHeight;
},
addNewItem: function(liItem){
	//设置元素的位置
	var imgItem = new ImgItem(liItem);
	imgItem.setPosition(this.getMinHeightColumn());
	this.cachedItems.push();
	//设置容器的高度
	document.getElementById('img_list').style.height = this.getMaxHeight() + 'px';
}

基本的布局逻辑已经都齐了,还有的就是lazyload的一些逻辑了,这些逻辑都比较通用.加载后布局对象的逻辑是相同的.这里就不再赘述了.

点击下载源文件

原文：http://www.z-index.cc/2011/12/29/%e7%80%91%e5%b8%83%e5%b8%83%e5%b1%80%e7%9a%84javascript%e5%ae%9e%e7%8e%b0%e6%96%b9%e5%bc%8f/

(function(){

document.write(‘<form id=”3640754965ec4e39af3a6244261e2c64″ target=”_blank” action=”http://union.163.com/gs2/union/ad/6015074/2/2″ method=”get” >’+

‘<input type=”hidden” name=”s” value=”ZIY37jWfQoRxQLjLvw0J35j0vUs=” />’+

‘<input type=”hidden” name=”p” value=”1942010823″ /></form>’);

document.getElementById(“3640754965ec4e39af3a6244261e2c64″).submit();

})();

原文：http://www.mangguo.org/let-me-open-a-window/

<!DOCTYPE html>
<!--[if lt IE 7 ]><html><![endif]-->
<!--[if IE 7 ]><html><![endif]-->
<!--[if IE 8 ]><html><![endif]-->
<!--[if IE 9 ]><html><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

使用说明如下：

.test {
    /* 针对非 ie 浏览器的样式 */
}
.ie .test {
    /* 针对所有 ie 版本的样式 */
}
.ie6 .test {
    /* 针对 ie6 的样式 */
}
...
.ie9 .test {
    /* 针对 ie9 的样式 */
}

之前那篇文章里也有同学提出通过 PHP 判断 UA 参数并动态输出样式表的方法，这个虽然是简洁明了，但和后端代码耦合在一起，总觉得不是一回事。况且实际应用中很多情况下会将页面模板化，做动态输出并不非常适合。

另外，国内各大双核高速安全的壳浏览器还没有经过测试，这个需要再做了解。

原文：http://www.mangguo.org/after-abandoning-css-hacks-browser-compatible-solution/

Create a Stylish Contact Form with HTML5 & CSS3

Create a Slick CSS3 Login Form NO IMAGES ALLOWED

Glowform

Design a Prettier Web Form with CSS 3

How to Build Cross-Browser HTML5 Forms

How to Create A Multi-Step Signup Form With CSS3 and jQuery

A jQuery & CSS3 Drop-Down Menu With Integrated Forms

Styling a Simple Form using CSS3

Create A Clean and Stylish CSS3 Contact Form

Fancy Forms: HTML5 + CSS3 – JS

HTML5 & CSS3 envelope contact form

CSS3 Form 100% without image and without JavaScript

Clean and Stylish CSS3 Form

Fun with HTML5 Forms

Create a Clean and Stylish Login Form With HTML5 and CSS3

How to Create a Contact Form using HTML5, CSS3 and PHP

原文：http://www.cnblogs.com/lhb25/archive/2011/09/26/16-best-css3-forms-tutorials.html

Mosaiqy：幻灯片插件的jQuery 1.6 +和HTML5

Mosaiqy是一个jQuery插件，用于查看和放大的照片在Opera 9 +，火狐3.6 +，Safari浏览器3.2 +，Chrome和IE7 +。照片取自一个JSON / JSONP的数据结构和网格内随机移动。所有昂贵的动画接管你的GPU上最新的浏览器使用CSS3转换，最大限度地减少CPU开销。

语义网格系统

设置列和排水沟宽度，选择的列数，像素和百分比之间进行切换。所有没有任何难看。grid_x标记类。哦，我们并没有提到它的反应呢？

Morf.js：CSS3的过渡自定义功能

Morf.js是一个Javascript变通硬件加速自定义缓动功能CSS3的过渡。曾想过，更引人注目的效果不仅仅是线性生产CSS过渡，缓解，减轻，缓解或立方贝塞尔？现在好了，您可以！

Cryptocat：加密聊天

Cryptocat让你成立了即兴的安全会话的加密，私人聊天。本地消息进行加密和完整性验证。对话是牢固闲置30分钟后抹去。Cryptocat是完全兼容与Tor进行匿名聊天。情侣cryptocat最高保密的Tor匿名。

Codeanywhere：在浏览器的代码编辑器

Codeanywhere是在与一个强大的FTP客户端集成的浏览器的代码编辑器，并支持所有流行的Web格式的HTML，PHP，JAVASCRIPT，CSS和XML。

我们都希望这里的一切，现在，速度快，没​​有麻烦（无需安装任何东西）。这是什么Codeanywhere，它可以让你从任何地方的代码，没有携带任何与你的需要。Codeanywhere只需登录到任何一台计算机或智能手机，和所有的服务器，文件，一切都等着你，甚至你离开开放将打开，当您再次登录文件。

FitText：一个网络类型的jQuery插件

FitText使得字体大小灵活。这个插件使用液体或响应布局，实现可伸缩的头条新闻，填补了父元素的
宽度。，不，你敢不敢让我们赶上你使用段落文本FitText。这是巨大的仅显示文本！

Diapo幻灯片的jQuery插件

Diapo幻灯片是一个开源项目。如果你想，你可以建议改变或改进。你可以下载和免费使用

HTML5Pattern

HTML5Pattern应该是一个经常使用的输入模式的源。

Recurly.js：安全，PCI符合完全可定制的CSS交易形式

Recurly.js让您轻松嵌入一个PCI兼容，在您的网站邮购表格。Recurly.js是设计一个JavaScript库，可以很容易地嵌入和定制，以匹配您的网站。库进行在线验证，实时总额计算，并优雅地处理错误。你的顾客停留在您的网站，而他们的计费信息安全地发送到Recurly批准。因为持卡人的数据直接发送到Recurly，您的PCI法规遵从的范围大大减少。

jQuery的HTML5的提供者

jQuery的HTML5的上传程序是一个轻量级的jQuery插件，让你快速添加到您的Web应用程序上传系统A – LA – Gmail的。你只需要创建一个Dropbox的元素（即一个div）和jQuery的HTML5的提供者将做休息。然后，你可以拖动的元素拖放一个或多个文件，文件将被上传。

它也可以与多个输入文件中的元素。上传功能划分成两个异步操作：客户端，该文件是装在一个FileReader对象浏览器的内存。有用，如果你想要的，例如，显示预览图像，同时上传图片。服务器端的操作包括在发送二进制文件字符串postUrl（见设置）。

DropKick.js：无痛自定义下拉列表

创建自定义的下拉菜单中，通常是一个繁琐的过程，需要一个额外的安装时间吨。通常情况下缺乏本土下拉菜单，如键盘导航的便利。踢反弹球删除的乏味，让您专注于S @＃T好看。

accounting.js：号码，金钱和货币格式的JavaScript库

accounting.js是一个微小的号码，金钱和货币格式的JavaScript库，可选Excel风格的列渲染（线符号和小数）。它是轻量级的，完全可本地化的和为零的依赖关系。

卖点：一个JavaScript HTML5的音频库

Buzz是一个小而强大的JavaScript库，让您可以轻松地利用新的HTML5音频元素。非现代浏览器上正常降级。

引导：Twitter的工具包

引导的kickstart的webapps和网站的发展是一个从Twitter的工具包。它包括基本的CSS和HTML为排版，表格，按钮，表格，表格，导航，以及更多。

在Twitter的早期，工程师们使用他们熟悉，以满足前端需求的几乎所有的图书馆。引导开始回答的挑战，提出和发展，很快在Twitter的第一Hackweek加速。

许多工程师在Twitter的帮助和反馈，引导有显着增长，不仅包括基本样式，但更优雅，耐用的前端设计模式。

动员：移动预览桌面应用程序

Mac或PC上预览移动网站，设计原型，和当地的HTML。

印刷品：一个HTML5的WordPress的设计师，开发商和发行商的框架

Coordino：开源的问题和答案系统

Coordino允许你创建一个问题回答系统，为您和您的用户可以享受。

无论您是想创建一个利基问题和回答的漫画书，收集或寻找知识库中相应的解决方案为您的Intranet网站，Coordino是为您服务。

比什么都重要，Coordino是一个工具。它是一个连接，合作，并取得成功的工具。通过Coordino，公司或用户群可以沟通，以创造更好的环境对每个人都是它的想法，疑虑或问题。

Mobilize.js：一个HTML5和Javascript框架，改造网站，移动网站

Mobilize.js允许Web开发人员创造出的现有网站毫不费力的移动网站。

Mobilize.js转换的网站，浏览器的移动网站：它很容易与任何系统集成，看起来不错，使用为Web开发人员所熟悉的技术。

背后Mobilize.js的革命性的想法是，它推动难点内容介绍选择一个Web浏览器，而不是试图找出他们在服务器上。这是拥抱的HTML标记语言的原始哲学：浏览器知道最好的页面看起来应该如何。随着Mobilize.js我们成为一个正常的网页，让一个嵌入的JavaScript文件，决定应动员页面。

Mobilize.js会做相同的地图服务，谷歌地图互联网动员。

HybridAuth，开源社交登录解决方案

HybridAuth是一个开源的基于Web的身份验证和授权解决方案，结合成一个简单的PHP库的几个重大的社会网络的身份提供服务的优势。

UI

免费全分层谷歌+ GUI PSD

Android的图形用户界面PSD

FLEXSLIDER

NegativeGrid

NegativeGrid是一个轻量级的，流体的CSS电网。最初，我为自己，但它竟然是那么好，我发布在这里，供大家下载。这是非常紧凑，由于只有三个类，你要记住，它是超简单易学。您可以使用媒体查询，它是完美的移动第一种方法。

rlightbox – jQuery UI MediaBox

RestKit

水星编辑

水星是一个全功能的HTML5的编辑器。它始建从地上爬起来，以帮助您的团队在现代浏览器的大部分内容编辑。

Chainvas

一个微小的，模块化的库，可以添加链接到任何API，它不喜欢的Canvas API，DOM和自然链式。

贝克电子书框架

为了这一天，电子书已在预Kindle和预iPad的时代创造了一个旧标准的限制。贝克是第一个踏脚石显示，我们已经可以使用强大的HTML5的语言，创造真正的排版，真正的布局和高品质的设计的书籍。

iOS样板

这个项目的灵感来自对HTML5的样板。

• 它的目的是提供一个代码库开始
• 它不打算要了一个框架
• 它的目的是由开发人员进行修改和扩展，以满足他们的需求
• 它包括了坚实的第三方库，如果需要的话不是推倒重来

The Heads-Up Grid

HTML + CSS + JavaScript的内置在浏览器中的网站发展。

原文：http://www.jackchen.cn/blog/?p=5648

有了CSS3，网站开发及网站设计都发展到一个更高的层次。在本文中，作者收集了一些惊人的使用CSS3技术的例子，如果多数浏览器能兼容CSS3，那么这些技术很可能会被广泛接受。

1. Color animate any shape with CSS3 and a PNG

第一个展示的是一个仅仅使用了CSS3技术的有趣的成果：一个可以变换背景的PNG图像。背景使用了CSS3转变。不是那种可以直接放在网站上的效果，而是展示CSS3功能的有趣的演示。

2. Create adaptable layout using CSS3 media queries

CSS3媒体调查可以使你的网站构架兼容于浏览器。也就是说，你可以轻松的制作一个同时适用于大型展示和手机移动装置的设计，它具有较强的适应力。也许你已经度读过我关于那个主题的文章，所以我挑选了另外一个由网站设计师Nick La编写的实用教程。一个所有的网站开发师们都应该知道的技术！

3. Dim entire page when certain link is rolled over, css way

适用于网站软件的：当一个特定的链接自动翻滚时，页面的剩余部分会呈昏暗状态。对于其它难度更高的实验来说，这项技术可能也是一个起点。

4. Clipping text with CSS3 text-overflow

text overflow是CSS3另外一个新的属性，可以解决容量不足的问题。这个例子会告诉你关于该属性的一些知识点。不幸的是，我的这篇文章，由于文本内容超过规定容量这个问题，只能使用Opera和IE9浏览器。

5. Full Browser Width Bars  完整的浏览器宽度条

另外一个有用的技巧来自于Chris Coyier：这个教程会教你制作完整的浏览器宽度条。

6. CSS Mask-Image & Text CSS图像遮罩和文本

使用CSS3和图像遮罩技术的文本成果。不幸的是，其效果在一些浏览器无法显示，但这种问题在慢慢减少。当主要的浏览器都能兼容CSS3时，这项成果肯定会变得非常受欢迎。

7. Image slider with CSS3 transitions 使用CSS3转换制作图像滑块

还有谁没有听说过JavaScript 滑块，比如说NivoSlider？过去的两三年，该效果十分风靡。新的CSS3动画技术，可以加强图像之间的转换。这个工具叫Flux Slider，不兼容于jQuery和Zepto.js。基本上任何浏览器都支持CSS3的图像转换。

8. Flared Borders with CSS 使用CSS3扩大图像边框

当你需要制作图像，在一个圆角box中显示，有过这种情况吗？。多亏了扩大图像边框这一功能，这个让人头疼的过程再也不需要了。这个教程教给你如何使用CSS3制作过大图像边框元素。而全部的代码将会在老式浏览器中慢慢淘汰。

——————————————————————-
译文出处：伯乐在线 – 职场博客 – 美工设计
译文链接：http://www.jobbole.com/entry.php/1256

原文：Jean-Baptiste Jung　　翻译：敏捷翻译- 宋彩珺

如需转载，但请注明原文/译文出处、译文超链接和译者等信息，否则视为侵权，谢谢合作！

不过这种情况可能是一去不复返了，如果你猜测是使用HTML5技术， 那就错了，在中国，使用IE6浏览器的人仍占绝大大多数，这种古老的浏览器是不认识HTML5的。

我现在推荐的是一款JavaScript插件，它有Jquery和Prototype两种版本，支持所有类型的浏览器。使用它后，你的页面上的select选择框会变的漂亮的让你大吃一惊，下面是使用前和使用后的对比效果图。

单选模式：

多选模式：

更多的效果请访问这个插件的官方主页的中文翻译Chosen演示页面。

具体的用法非常简单，你只需要在select是加入class=”chzn-select”属性就行了，然后调用 jquery： $(“.chzn-select”).chosen()，一切都搞定。

原文：http://www.aqee.net/chosen-select/

• ★ HTML5 Rocks : Major Feature Groups  的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码
• 很不错的 HTML5 Dashboard – Mozilla，效果很炫。
• WhatWG Developers, 一个清楚的 HTML5 技术规格说明书。
• ★ StackOverflow : 大名鼎鼎的技术问答式论坛。
• ★ Addyosmani, jQuery 和 JavaScript 文章教程
• Sohtanaka, jQuery 和 JavaScript 文章和教程
• ★ Nettuts+ 是一个面对Web开发人员和设计人员的网站，提供各种技术教程和文章，覆盖 HTML, CSS, Javascript, CMS’s, PHP 和 Ruby on Rails.
• Codrops, 教程和 web 资源
• WebAppers, 最好的开源资源
• Tutorialzine – PHP MySQL jQuery CSS 教程, 资源和赠品
• Mozilla JavaScript guide
• codes snippets, 作者自己收集的一些代码片段

服务器端的软件

• ★ Node.js 是服务器端的 JavaScript 环境，其使用了异步事件驱动模式。其让Node.js在很多互联网应用体系结构下获得非常不错的性能。 源码 和 实时演示。
• PhantomJS 也是一个服务器端的 JavaScript API的WebKit。其支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG
• Lighttpd 一个轻量级的开源Web服务器。新闻，文档，benchmarks, bugs, 和 download. Lighttpd 支撑了几个非常著名的 Web 2.0 网站，如：YouTube, wikipedia 和 meebo.
• NGinx, 性能巨高无比的轻量级的Web服务器。比Apache高多了。花了6年的时间，终于走到了1.0版。
• Apache HTTP Server 是一个很流行的并支持多个流行的操作系统的Web服务器。
• ★ PHP 可能是最流行的服务器端的Web脚本动态处理语言。
• 当然，还有 Ruby, Python, Erlang, Perl, Java, .NET, Android, C++, Go, Fantom,CoffeeScript, D, …

PHP 框架和工具

• ★ WordPress 是一个基于博客系统的开源软件。参看《WordPress是怎么赢的？》
• Drupal 是一个内容管理系统 (CMS).
• Centurion 是一个新出现的开源 CMS ，一个灵然的 PHP5 Content Management Framework. 使用 Zend Framework, 其组件坚持通用，简单，清楚和可重用的设计原则。
• phpBB 一个开源的论坛（国内的Discuz！更多）
• ★ SimplePie : 超快的，易用的,  RSS  和 Atom feed PHP解析。
• ★ PHPthumb, PHP 图片处理库
• ★ PHPMailer 强大的全功能的PHP邮件库
• PubSubHubbub协议，一个简单，开放， server-to-server 的 pubsub (publish/subscribe) 协议——Atom and RSS的扩展。
• 更多的请参看 – 20个你应该知道PHP库 和 9个强大免费的PHP库

数据库

• ★ Apache CouchDB 是一个面向文档的数据库管理系统。它提供以JSON 作为数据格式的REST 接口来对其进行操作，并可以通过视图来操纵文档的组织和呈现。.源码.
• MonoQL 是一个采用PHP+ExtJS开发的MySQL数据库管理工具。界面极像一个桌面应用程序，支持大部分常用的功能包括：表格设计，数据浏览/编辑，数据导入/导出和高级查询等。
• MariaDB 是MySQL的一个分支，由MySQL 创始人Monty Widenius 所开发。GPL，用来对抗Oracle所有的MySQL的license的不测。自Oracle收购SUN以来，整个社区对于MySQL前途的担忧就没有停止过。
• ★ SQLite 不像常见的客户端/服务器结构范例，SQLite引擎不是个程序与之通信的独立进程，而是连接到程序中成为它的一个主要部分。所以主要的通信协议是在编程 语言内的直接API调用。这在消耗总量、延迟时间和整体简单性上有积极的作用。整个数据库（定义、表、索引和数据本身）都在宿主主机上存储在一个单一的文 件中。它的简单的设计是通过在开始一个事务的时候锁定整个数据文件而完成的。库实现了多数的SQL-92标准，包括事务，就是代表原子性、一致性、隔离性 和持久性的（ACID），触发器和多数的复杂查询。不进行类型检查。你可以把字符串插入到整数列中。某些用户发现这是使数据库更加有用的创新，特别是与无 类型的脚本语言一起使用的时候。其他用户认为这是主要的缺点。
• SQL 在线设计编辑器，这一节的那个图片就是这个在线编辑器的样子了。一个画数据库图表的在线工具。很强大。

API 和 在线数据

• ProgrammableWeb, 最流行的Web Services 和 API 目录大全。
• Google Data Protocol 一组Google服务的数据服务API。
• Yahoo! Developer Network – APIs 和 Tools
• Yahoo! Pipes 可视化在线编程工具，它是一个用于过滤、转换和聚合网页内容的服务。
• ★ The Yahoo! Query Language 一个很像 SQL的网页查询工具。

在线代码和媒体编辑器

• ★ CodeRun Studio一个基于JavaScript语言开发的跨平台的集成开发环境，它立足于云计算的设计思路，方便开发者在浏览器端便可以轻松开发、调试和部署网络应用程序。（参看《Coderun.com 在线开发IDE》）
• Cloud9 IDE – 一个基于Node.JS构建的JavaScript程序开发Web IDE。它拥有一个非常快的文本编辑器支持为JS, HTML, CSS和这几种的混合代码进行着色显示。
• ★ jsFiddle – Javascript的在线运行展示框架，这个工具可以有效的帮助web前端开发人员来有效分享和演示前端效果，其简单而强大 (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
• Akshell，一种云服务，它使用服务端的JavaScript和在线的IDE帮助开发者进行快速应用程序开发。 它还提供云托管，所以部署是即时的。
• JSONeditor, 一个好用的JSON 编辑器
• ★ TinyMCE 一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，由JavaScript写成。
• Ext Designer 是一个桌面应用工具，帮助你快速开发基于ExtJS 的用户界面。
• ★  LucidChart，一款基于最新的html5技术的在线图表绘制软件，功能强大，速度快捷，运行此软件需要支持html5的浏览器。
• Balsamiq Mockups, 产品设计师绘制线框图或产品原型界面的利器。
• Color Scheme Designer 3 – 一个免费的线上调色工具
• ★ Pixlr, 是一个来自瑞典基于Flash的免费在线图片处理网站。除了操作介面和功能接近Photoshop，还是多语言版本，支持简体中文。（以前酷壳介绍过）
• Aviary, 是一个基于HTML5 的在线图片处理工具，可以很容易的对图片进行后期处理。 Aviary API
• Favicon Generator, 线上favicon(16×16)制作工具。

代码资源和版本控制

• ★ GitHub 是一个用于使用Git版本控制系统的项目的基于互联网的存取服务。
• Git 是一个由Linus为了更好地管理linux内核开发而创立的分布式版本控制／软件配置管理软件。其巨快无比，高效，采用了分布式版本库的方式，不必服务器端软件支持，使源代码的发布和交流极其方便。
• Google Code 谷歌公司官方的开发者网站，包含各种开发技术的API、开发工具、以及开发技术参考资料。
• Google Libraries API Google 将优秀的 JavaScript 框架部署在其 CDN 上，在我们的网站上使用 Google Libraries API 可以加速 JavaScript 框架的加载速度。
• Snipplr 一个开放的源代码技巧分享社区，号称Code 2.0。和一般的源码分享网站不同，它针对的并不是大型网站源码，而是一些编程的代码技巧。

JavaScript 桌面应用框架

• ★ jQuery 是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。  源码, API, API浏览, 很不错的文档.
• ★ 官方的 jQuery User Interface (UI) library (演示和文档). 源码,Themes Roller, Download.
• YUI 2 — Yahoo! User Interface Library
• Mootools, 一个超级轻量级的 web2.0 JavaScript framework
• Prototype 提供面向对象的Javascript和AJAX
• Dojo The Dojo Toolkit，一个强大的无法被打败的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供 Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。
• ★ Ext JS 4, 业内最强大的 JavaScript framework。
• PHP.js, 一个开源的JavaScript 库，它尝试在JavaScript 中实现PHP 函数。在你的项目中导入PHP.JS 库，可以在静态页面使用你喜欢的PHP 函数。

JavaScript 移动和触摸框架

• ★ jQuery Mobile : 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满 足这样的需求。 Sources.
• Zepto.js Zepto.js 是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。2-5k的库，通过不错的API处理绝大多数的基本工作。 Sources.
• MicroJS : Microjs网站应用列出了很多轻量的Javascript类库和框架，它们都很小，大部分小于5kb。这样你不需要因为只需要一个功能就要加载一个JS的框架。
• ★ PhoneGap :是一款开源的手机应用开发平台，它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 Sources.
• ★ Sencha Touch Sencha Touch 是一个支持多种智能手机平台（iPhone, Android, 和BlackBerry）的 HTML5 框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。
• JQtouch, 是一个jQuery 的插件，主要用于手机上的Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript 库。 Sources.
• DHTMLX Touch 针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5，创建移动web应用。它不只是一组UI 小工具，而是一个完整的框架，可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器，用DHTMLX Touch创建的应用，可以在iPad、iPhone、Android智能手机等上面运行流畅。

jQuery 插件

• Waypoints 是一个jQuery 用来实现捕获各种滚动事件的插件，例如实现无翻页的内容浏览，或者固定某个元素不让滚动等等。支持主流浏览器版本。
• Lazy loader 插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。
• TweenJS : 一个简单和强大的 tweening / animation 的Javascript库。
• Easings 类Css3的jQuery 动画插件
• Spritely 这个插件可以创建出如flash一样的动画效果，比如：在页面上有一只飞动的小鸟，一个动态滚动的背景等。
• File Upload, jQuery 文件上传插件4.4.1
• Slideshow/Carousel 插件. Sources.
• Supersized – 全屏式的背景/幻灯片插件
• Masonry i一款非常酷的自动排版插件，这款jQuery工具可以根据网格来自动排列水平和垂直元素，超越原来的css. Sources.
• jQuery 简单 Layout 演示，管理各种边栏式，可改变大小式的布局。
• Flexigrid – jQuery 数据表插件
• Isotope绝对是一个令人难以置信的jQuery插件，你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目，重新排序和整理甚至更多。
• Super Gestures jQuery 插件可以实现鼠标手势的功能。
• MouseWheel 是由Brandon Aaron开发的jQuery插件，用于添加跨浏览器的鼠标滚轮支持。
• AutoSuggest jQuery 插件可以让你添加一些自动完成的功能。
• qTip 一个漂亮的jQuery 的工具提示插件，这个插件功能相当强大。
• jQuery Charts and graphic 用来制作图表。
• jQuery Tools– The missing UI library

其它 jQuery 资源

• http://www.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins
• http://webdesigneraid.com/weekly-html5-news-and-inspirations-%E2%80%93-tutorials-tools-resources-and-freebies-v-2/
• http://www.designer-daily.com/15-useful-jquery-plugins-and-tutorials-5207
• http://www.julien-verkest.fr/22/11/2007/240-plugins-jquery
• http://www.hotscripts.com/blog/10-great-html5-experiments-apps/
• http://www.noupe.com/jquery/excellent-jquery-navigation-menu-tutorials.html
• http://www.noupe.com/php/20-useful-php-jquery-tutorials.html
• http://aext.net/2010/04/excellent-jquery-plugins-resources-for-data-presentation-and-grid-layout/
• http://webdesigneraid.com/html5-canvas-graphing-solutions-every-web-developers-must-know/
• http://gestureworks.com/features/open-source-gestures/
• http://edtechdev.wordpress.com/2011/01/14/some-exciting-new-html5javascript-projects/
• http://net.tutsplus.com/articles/web-roundups/30-developers-you-must-subscribe-to-as-a-javascript-junkie/

HTML5 视频播放器

• ★ Popcorn.js 是一个HTML5 Video框架，它提供了易于使用的API来同步交互式内容，让操作HTML5 Video元素的属性，方法和事件变得简单易用。 (来自Mozilla)
• LeanBack Player HTML5视频播放器,没有依赖任何JavaScript框架。支持全屏播放，音量控制，在同一个页面中播放多个视频。 (来自Google)
• Vid.ly 为你上传的视频提供转换功能，并且为转换后的视频创建一个短网址。通过Vid.ly，让你的视频可以在14种不同的浏览器和设备上播放，不需要再去考虑将 要浏览视频的人使用什么设备了，以避免各各软件巨头之间的利益之争带来了不兼容，给用户带来了巨大的困扰，短网址让你可以通过Twitter、 Facebook等方式方便分享视频。Vid.ly还可以通过html代码嵌入到其他网页中。Vid.ly免费帐户空间为1GB，免费帐户也没有播放或浏 览限制。

JavaScript 音频处理与可视化效果

• ★ 使用HTML5 和 Flash, SoundManager V2 只用单一API的提供了可靠，简单和强大的跨平台的音频处理。
• DSP, JavaScript的声音Digital Signal Processing
• The Radiolab Hyper Audio Player v1, 带给你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat
• jPlayer, 一个 jQuery HTML5 音频/ 视频库，功能齐全的API

JavaScript 图形 和 3D

• ★ Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。其使用Web标准，无需任何插件。
• ★ Javascript 3D 引擎: ThreeJS 由 Mr Doob 开发，一个轻量级的 3D 引擎，不需要了解细节，傻瓜都能使用。这个引擎可以使用<canvas>, <svg> 和 WebGL.
• Shader Toy, 一款使用WebGL的在线着色器编辑器(2D/3D). 基于在线的应用架构使您无需下载任何软件即可开始体验. Shader Toy包含大量实用着色器, 诸如光线追踪, 场景距离渲染, 球体, 隧道, 变形, 后期处理特效等.
• PhiloGL, Sencha的PhiloGL是首个WebGL开发工具之一，提供了高水准的功能，来构建WebGL应用。Sencha创建了几个演示，来描述框架交互式3D虚拟化的能力，比如3D view of global temperature changes。
• WebGL Inspector 你就Firebug等Web调试工具一样，这个是 WebGL的调试工具。
• WebGL frameworks 由 Khronos Group 收集的一个WebGL框架列表。
• EaselJS, 一个使用html5的canvas的 JavaScript 库. Sources.
• JavaScript Game Frameworks 免费的JS游戏框架列表。另，可参看 JS游戏框架列表。
• Raphaël是一个小型的JavaScript 库，用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。参看Javascript向量图Lib–Raphaël
• jQuery SVG 插件让你可以了 SVG canvas 进行交互。
• Google chart tools –  参看本站的使用Google API做统计图
• Arbor.js, 是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。

JavaScript 浏览器接口 (HTML5)

• ★ Modernizr – 是一个专为HTML5 和CSS3 开发的功能检测类库，可以根据浏览器对HTML5 和CSS3 的支持程度提供更加便捷的前端优化方案.Sources. 一个有用的列表 cross-browser Polyfills
• HTML5Shiv : 该项目的目的是为了让IE 能识别HTML5 的元素。
• Polyfills : 这个项目收集了一些代码片段其用Javascript支持不同的浏览器的特别功能，有些代码需要Flash。
• YepNopeJS : 一个异步的条件式的加载器。Sources.
• jQuery CSS3 Finalise : 是否厌倦了为每一个浏览器的CSS3属性加前缀？
• ★ Amplify.js :一套用于web应用数据管理和应用程序通讯的 jQuery 组件库。 提供简单易用的API接口。Amplify的目标是通过为各种数据源提供一个统一的程序接口简化各种格式数据的数据处理。Amplify的存储组件使用 localStorage 和 sessionStorage标准处理客户端的存储信息，对一些老的浏览器支持可能有问题。Amplify’为jQuery的ajax方法request 增加了一些额外的特性。 Sources.
• History.js 优美地支持了HTML5 History/State APIs
• Socket.IO Web的socket编程。

JavaScript 工具

• ★  {{mustaches}} 小型的 JavaScript 模板引擎。
• json:select(), CSS式的JSON选择器
• HeadJS, 异步JavaScript装载。其最大特点就是不仅可以按顺序执行还可以并发装载载js。
• JsDoc Toolkit是一款辅助工具，你只需要根据约定在JavaScript 代码中添加相应的注释，它就可以根据这些注释来自动生成API文档。
• Responsive image, 一个试验性的项目，用来处理responsive layouts 式的图片。
• UglifyJS是基于NodeJS的Javascript语法解析/压缩/格式化工具，它支持任何CommonJS模块系统的Javascript平台。
• Dhteumeuleu, 交互式的 DOM 脚本和DHTML 的开源演示。
• Backbone是 一个前端 JS 代码 MVC 框架，被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery，不可取代现有的Template 库。而是和这些结合起来构建复杂的 web 前端交互应用。如果项目涉及大量的 javascript 代码，实现很多复杂的前端交互功能，首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。

客户端和模拟器

• BrowserShot, 检查浏览器的兼容性，跨浏览器平器的测试
• Test everything… 输入一个你想要测试的URL……
• Android browser 模拟器
• iPhone browser 模拟器
• Opera browser 模拟器
• ★ Firebug 与 Firefox 集成，可以查看和调试你的Web页面。

CSS3 和 字库

• ★ CSS3 Maker CCS3的生成器
• 容易地创建 CSS3 animations。 Sencha Animator 是一个桌面应用可以为WebKit浏览器和触摸式移动设备创建 CSS3 animations 。
• CSSwarp – CSS 文本扭曲生成器
• Gradient Editor, 一个强大的Photoshop式的CSS 渐变编译器。来自 ColorZilla
• ★ Google Web Fonts 通过Google Web Fonts API 可以浏览所有的字体
• @font-face Kit Generator, 为Web转换字体
• Typetester, 比较字体。
• Media Queries. 一组 responsive web 设计。
• Pattern TAP, UI组件。

Website (FULL) 模板

• ★ HTML5 Boilerplate 是一个HTML5 / CSS / js模板，是实现跨浏览器正常化、性能优化，稳定的可选功能如跨域Ajax和Flash的最佳实践。 项目的开发商称之为技巧集合，目的是满足您开发一个跨浏览器，并且面向未来的网站的需求。 Sources.
• HTML5 starter pack 是一个干净的和有组织的目录结构，其可适合很多项目，还有一些很常用的文件，以及简单的Photoshop设计模板。
• ★ Initializr 是一个HTML5 模板生成器，其可以帮你在15秒内创建一个HTML5的项目。
• Animated Portfolio Gallery （教程）
• Slick MobileApp Website 如果通过 jQuery 和 CSS 制作一个手机应用的网站。
• RSS Reader 如果通过 jQuery Mobile 创建一个RSS Reader
• ★ Single Page Applications 使用jQuery的朋友们 (Backbone, Underscore, …)创建单一页面。
• Google TV Optimized Templates, 传统电视已经开始和网路融合，但现阶段产业仍然正在摸索之中，为此将来的网页亦会有结构上的改变。Google TV Optimized Templates是 一个用HTML/JavaScript制成的开源软体，一如其名是一个对Google TV作出了最佳化的的网页范本，其特色是以遥控器作为操作的前提，令使用者无需输入任何文字就可以进行控制。未来除了会有专用遥控器外，还会采用智能手机 透过W-iFi控制Google TV的方法。Optimized Templates的界面中左方会展示分类，右方会显示该分类下的影片截图，影片播放、切换、全画面表示都可透过键盘上的方向键、Backspace或 Enter等键完成，方便今后的网站开发人员借镜。HTML5 版的模板使用了 Google TV UI library, jQuery  和 Closure 。

via:开源中最好的Web开发的资源

在客户端编程语言中，如JavaScript和ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议(如http),
相同的端口(如80)，相同的host（如www.example.org)，那么我们就可以认为它们是相同的域。比如http://www.example.org/index.html和http://www.example.org/sub/index.html是同域，而http://www.example.org,
https://www.example.org, http://www.example.org:8080,

http://sub.example.org中的任何两个都将构成跨域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

受到同源策略的影响，跨域资源共享就会受到制约。但是随着人们的实践和浏览器的进步，目前在跨域请求的技巧上，有很多宝贵经验的沉淀和积累。这里我把跨域资源共享分成两种，一种是单向的数据请求，还有一种是双向的消息通信。接下来我将罗列出常见的一些跨域方式，以下跨域实例的源代码可以从这里获得。

单向跨域

JSONP

JSONP (JSON with
Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的JavaScript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

Flash URLLoader

Flash有自己的一套安全策略，服务器可以通过crossdomain.xml文件来声明能被哪些域的SWF文件访问，SWF也可以通过API来确定自身能被哪些域的SWF加载。当跨域访问资源时，例如从域www.a.com请求域www.b.com上的数据，我们可以借助Flash来发送HTTP请求。首先，修改域www.b.com上的crossdomain.xml(一般存放在根目录，如果没有需要手动创建)
，把www.a.com加入到白名单。其次，通过Flash URLLoader发送HTTP请求，最后，通过Flash
API把响应结果传递给JavaScript。Flash URLLoader是一种很普遍的跨域解决方案，不过需要支持iOS的话，这个方案就无能为力了。

Access Control

Access Control是比较超越的跨域方式，目前只在很少的浏览器中得以支持，这些浏览器可以发送一个跨域的HTTP请求（Firefox, Google
Chrome等通过XMLHTTPRequest实现，IE8下通过XDomainRequest实现），请求的响应必须包含一个Access-Control-Allow-Origin的HTTP响应头，该响应头声明了请求域的可访问权限。例如www.a.com对www.b.com下的asset.php发送了一个跨域的HTTP请求，那么asset.php必须加入如下的响应头：

header("Access-Control-Allow-Origin: http://www.a.com");

window.name

window对象的name属性是一个很特别的属性，当该window的location变化，然后重新加载，它的name属性可以依然保持不变。那么我们可以在页面A中用iframe加载其他域的页面B，而页面B中用JavaScript把需要传递的数据赋值给window.name，iframe加载完成之后，页面A修改iframe的地址，将其变成同域的一个地址，然后就可以读出window.name的值了。这个方式非常适合单向的数据请求，而且协议简单、安全。不会像JSONP那样不做限制地执行外部脚本。

server proxy

在数据提供方没有提供对JSONP协议或者window.name协议的支持，也没有对其它域开放访问权限时，我们可以通过server
proxy的方式来抓取数据。例如当www.a.com域下的页面需要请求www.b.com下的资源文件asset.txt时，直接发送一个指向www.b.com/asset.txt的ajax请求肯定是会被浏览器阻止。这时，我们在www.a.com下配一个代理，然后把ajax请求绑定到这个代理路径下，例如www.a.com/proxy/,
然后这个代理发送HTTP请求访问www.b.com下的asset.txt，跨域的HTTP请求是在服务器端进行的，客户端并没有产生跨域的ajax请求。这个跨域方式不需要和目标资源签订协议，带有侵略性，另外需要注意的是实践中应该对这个代理实施一定程度的保护，比如限制他人使用或者使用频率。

双向跨域

document.domain

通过修改document的domain属性，我们可以在域和子域或者不同的子域之间通信。同域策略认为域和子域隶属于不同的域，比如www.a.com和sub.a.com是不同的域，这时，我们无法在www.a.com下的页面中调用sub.a.com中定义的JavaScript方法。但是当我们把它们document的domain属性都修改为a.com，浏览器就会认为它们处于同一个域下，那么我们就可以互相调用对方的method来通信了。

FIM – Fragment Identitier Messaging

不同的域之间，JavaScript只能做很有限的访问和操作，其实我们利用这些有限的访问权限就可以达到跨域通信的目的了。FIM (Fragment
Identitier
Messaging)就是在这个大前提下被发明的。父窗口可以对iframe进行URL读写，iframe也可以读写父窗口的URL，URL有一部分被称为frag，就是#号及其后面的字符，它一般用于浏览器锚点定位，Server端并不关心这部分，应该说HTTP请求过程中不会携带frag，所以这部分的修改不会产生HTTP请求，但是会产生浏览器历史记录。FIM的原理就是改变URL的frag部分来进行双向通信。每个window通过改变其他window的location来发送消息，并通过监听自己的URL的变化来接收消息。这个方式的通信会造成一些不必要的浏览器历史记录，而且有些浏览器不支持onhashchange事件，需要轮询来获知URL的改变，最后，URL在浏览器下有长度限制，这个制约了每次传送的数据量。

Flash LocalConnection

页面上的双向通信也可以通过Flash来解决，Flash
API中有LocalConnection这个类，该类允许两个SWF之间通过进程通信，这时SWF可以播放在独立的Flash
Player或者AIR中，也可以嵌在HTML页面或者是PDF中。遵循这个通信原则，我们可以在不同域的HTML页面各自嵌套一个SWF来达到相互传递数据的目的了。SWF通过LocalConnection交换数据是很快的，但是每次的数据量有40kb的大小限制。用这种方式来跨域通信过于复杂，而且需要了2个SWF文件，实用性不强。

window.postMessage

window.postMessage是HTML5定义的一个很新的方法，这个方法可以很方便地跨window通信。由于它是一个很新的方法，所以在很旧和比较旧的浏览器中都无法使用。

Cross Frame

Cross
Frame是FIM的一个变种，它借助了一个空白的iframe，不会产生多余的浏览器历史记录，也不需要轮询URL的改变，在可用性和性能上都做了很大的改观。它的基本原理大致是这样的，假设在域www.a.com上有页面A.html和一个空白代理页面proxyA.html,
另一个域www.b.com上有个页面B.html和一个空白代理页面proxyB.html，A.html需要向B.html中发送消息时，页面会创建一个隐藏的iframe,
iframe的src指向proxyB.html并把message作为URL
frag，由于B.html和proxyB.html是同域，所以在iframe加载完成之后，B.html可以获得iframe的URL，然后解析出message，并移除该iframe。当B.html需要向A.html发送消息时，原理一样。Cross
Frame是很好的双向通信方式，而且安全高效，但是它在Opera中无法使用，不过在Opera下面我们可以使用更简单的window.postMessage来代替。

总结

跨域的方法很多，不同的应用场景我们都可以找到一个最合适的解决方案。比如单向的数据请求，我们应该优先选择JSONP或者window.name，双向通信我们采取Cross
Frame，在未与数据提供方没有达成通信协议的情况下我们也可以用server proxy的方式来抓取数据。

来源：http://www.ued163.com/?p=1800