其实很简单，先把下列代码存为 abc.reg 并导入：

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\复制图像地址(&Z)]
@=”C:\\CopyImageUrl.htm”
“contexts”=dword:00000002

并把下列代码存为 C:\CopyImageUrl.htm：

<script language=”javascript” defer>
var Elem=external.menuArguments.event.srcElement;
var imgUrl=”;
if(Elem.tagName==’IMG’) imgUrl=Elem.src;
else if(Elem.tagName==’A'){
var cElem=Elem.children;
if(cElem.length){
for(i=0; i<=cElem.length-1; i++){
if(cElem[i].tagName==’IMG’) imgUrl=cElem[i].src;
break;
}
}
}
if(imgUrl) clipboardData.setData(‘text’,imgUrl)
</script>

重启你的浏览器就可以用了。

其他不转了,看原文:

http://www.playes.net/Blog/436.asp

相关日志

• 龙博AJAX框架 (0)
• 用函数使JQuery ui dialog的按钮是否可用 (0)
• 用js的json_decode解决JSON中文编码问题 (0)
• 整理实用JavaScript开发工具 (0)
• 强烈推荐ChromePlus浏览器 (0)
• 一无敌的jqueryui多级下拉菜单插件jQuery Menu (0)
• [转]利用javascript实现web页面刷新的方法 (0)
• [转]”完美”跨域 (0)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

	$("#newdialog").dialog({
		autoOpen: false,
		height: 400,
		width: 380,
		modal: true,
		buttons: {
			'关闭': function() {
				$(this).dialog('close');
			},
			'确定': function() {
				dlBtnEnable(false);//把按钮禁用
				//ajax提交数据
				$.ajax({//这里就省略了,不是重点
				});
			}
		},
		close: function() {
			//关闭窗口需要做的事情
		},
		open: function() {
			$.getJSON("test.php?id="+nowid,
				function(data){					
					//那数据来怎样....省略
					dlBtnEnable(true);//可以按钮
			}); 
		}
	});
//控制按钮是否可用的函数.
function dlBtnEnable(enable)
{
    var dlgButton = $('.ui-dialog-buttonpane button');//喔喔,全选所有dialog的按钮,你也可以加些条件,选定指定窗口,不过我这里没必要.
    if (enable) {
        dlgButton.attr('disabled', '');
        dlgButton.removeClass('ui-state-disabled');
    } else {
        dlgButton.attr('disabled', 'disabled');
        dlgButton.addClass('ui-state-disabled');
    }
}

相关日志

• [转]jQuery Ajax 全解析 (0)
• [原创]用jquery做了一个复制流量的东西 (0)
• js实现页面焦点计时 (0)
• jquery日历选择插件datePicker 简单汉化及应用实例 (1)
• jQuery 1.3中新增的方法live()的应用 (0)
• 龙博AJAX框架 (0)
• 转 在浏览器右键添加自定义菜单 (0)
• 用js的json_decode解决JSON中文编码问题 (0)

jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。

目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。
还不支持 blur, focus, mouseenter, mouseleave, change, submit
与bind()不同的是，live()一次只能绑定一个事件。

这个方法跟传统的bind很像，区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说，如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。而无需重新给这种新增加的元素绑定事件。

.live()与流行的liveQuery插件很像，但有以下几个主要区别：

• .live 目前只支持所有事件的子集，支持列表参考上面的说明。
• .live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
• .live 没有”setup”和”cleanup”的过程。因为所有的事件是委派而不是直接绑定在元素上的。

要移除用live绑定的事件，请用die方法

示例

点击生成的p依然据有同样的功能。

HTML 代码:

jQuery 代码:

相关日志

• 用函数使JQuery ui dialog的按钮是否可用 (0)
• [转]jQuery Ajax 全解析 (0)
• [原创]用jquery做了一个复制流量的东西 (0)
• js实现页面焦点计时 (0)
• jquery日历选择插件datePicker 简单汉化及应用实例 (1)
• 龙博AJAX框架 (0)
• 转 在浏览器右键添加自定义菜单 (0)
• 用js的json_decode解决JSON中文编码问题 (0)

最后找到一个js版的json_decode,果然有效,贴一下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

function json_decode (str_json) { 
    var json = this.window.JSON;
    if (typeof json === 'object' && typeof json.parse === 'function') {
        try {
            return json.parse(str_json);
        } catch(err) {
            if (!(err instanceof SyntaxError)) {
                throw new Error('Unexpected error type in json_decode()');
            }
            this.php_js = this.php_js || {};
            this.php_js.last_error_json = 4; // usable by json_last_error()
            return null;
        } 
    }    
    var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
    var j;
    var text = str_json;
    cx.lastIndex = 0;
    if (cx.test(text)) {
        text = text.replace(cx, function (a) {
            return '\\u' +
            ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
        });
    }
    if ((/^[\],:{}\s]*$/).
        test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@').
            replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
            replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
        j = eval('(' + text + ')'); 
        return j;
    }
 
    this.php_js = this.php_js || {};
    this.php_js.last_error_json = 4; // usable by json_last_error()
    return null;
}

原出处:http://phpjs.org/functions/json_decode:456

相关日志

• [转]40 个轻量级 JavaScript 库 （下） (0)
• 龙博AJAX框架 (0)
• 整理实用JavaScript开发工具 (0)
• 利用PHP实现AJAX跨域HTTP GET (4)
• [转]利用javascript实现web页面刷新的方法 (0)
• [转]jQuery Ajax 全解析 (0)
• [转]javascript把数字格式化转换成货币型 (0)
• [转]25 个在 Web 中嵌入图表的免费资源 (0)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function outputMoney(number) {
	number=number.replace(/\,/g,"");
	if (isNaN(number)||number=="") return "";
		number = Math.round(number*100) /100;
	if(number<0)
		return '-'+outputDollars(Math.floor(Math.abs(number)-0) + '') + outputCents(Math.abs(number) - 0);
	else
		return outputDollars(Math.floor(number-0) + '') + outputCents(number - 0);
}
function outputDollars(number)
{
	if (number.length<= 3)
		return (number == '' ? '0' : number);
	else{
		var mod = number.length%3;
		var output = (mod == 0 ? '' : (number.substring(0,mod)));
		for (i=0 ; i< Math.floor(number.length/3) ; i++)
		{
		  if ((mod ==0) && (i ==0))
		  output+= number.substring(mod+3*i,mod+3*i+3);
		  else
		  output+= ',' + number.substring(mod+3*i,mod+3*i+3);
		}
		return (output);
	}
}
function outputCents(amount){
	amount = Math.round( ( (amount) - Math.floor(amount) ) *100);
	return (amount<10 ? '.0' + amount : '.' + amount);
}

相关日志

• 用js的json_decode解决JSON中文编码问题 (0)
• 整理实用JavaScript开发工具 (0)
• [转]利用javascript实现web页面刷新的方法 (0)
• [转]40 个轻量级 JavaScript 库 （下） (0)
• js实现页面焦点计时 (0)
• flash AS3与javascript相互通信(例子) (0)
• 龙博AJAX框架 (0)
• 转 在浏览器右键添加自定义菜单 (0)

Javascript刷新页面的几种方法：

)

location.reload()

location

location.assign(location)

)

window.navigate(location)

location.replace(location)

其实一种就够,习惯用location.reload()

自动刷新页面的方法:
1.页面自动刷新：把如下代码加入<head>区域中
<meta http-equiv=“refresh“ content=“20“>
其中20指每隔20秒刷新一次页面.

2.页面自动跳转：把如下代码加入<head>区域中
<meta http-equiv=“refresh“ content=“20;url=http://www.wyxg.com“>
其中20指隔20秒后跳转到http://www.wyxg.com页面

3.页面自动刷新js版
<script language=“JavaScript“>
function myrefresh()
{
window.location.reload();
}
setTimeout(‘myrefresh()‘,1000); //指定1秒刷新一次
</script>

JS刷新框架的脚本语句

//如何刷新包含该框架的页面用
<script language=JavaScript>
parent.location.reload();
</script>

//子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
(　或 <a href=“javascript:opener.location.reload()“>刷新</a>   )
//如何刷新另一个框架的页面用
<script language=JavaScript>
parent.otherFrameID.location.reload();
</script>

如果想关闭窗口时刷新或者想开窗时刷新的话，在<body>中调用以下语句即可。
<body onload=“opener.location.reload()“> 开窗时刷新
<body onUnload=“opener.location.reload()“> 关闭时刷新
<script language=“javascript“>
window.opener.document.location.reload()
</script>

相关日志

• 用js的json_decode解决JSON中文编码问题 (0)
• 整理实用JavaScript开发工具 (0)
• [转]javascript把数字格式化转换成货币型 (0)
• [转]40 个轻量级 JavaScript 库 （下） (0)
• js实现页面焦点计时 (0)
• flash AS3与javascript相互通信(例子) (0)
• 龙博AJAX框架 (0)
• 转 在浏览器右键添加自定义菜单 (0)

一直没怎么看国内的js框架,发现国产的功能就是强大,先不看代码,看功能就觉得牛…

什么是龙博

龙博AJAX框架是一个类似于Extjs的国产AJAX图形界面框架，包含40个图形界面控件, 例如标签(Tabs)，窗口对话框(Dialog),树(Tree)，树型表格(TreeGrid)，时间线(TimeLine)等等；并带有所见即所得的界面设计器。

我能用龙博干什么

龙博控件可用于各种基于Web的应用开发，如进销存系统，信息管理系统。龙博可视化编辑器很容易扩展成基于Web的表单设计器，OA流程设计器，自动控制组态软件等等

• 富客户端技术, 可以和任意后端技术(包括但不限于php, .Net, Java, python)或静态的HTML页面.
• 包含40多个图形界面控件, 例如标签(Tabs),
  窗口对话框(Dialog),树型表格(TreeGrid),时间线(TimeLine)等等.
• 多浏览器兼容, 包括IE6+, firefox1.5+, opera9+,
  safari3+ 和 Google Chrome.
• 大量的API文档 和示例.
• 不断更新的代码片段供程序员参考.
• 极为方便的所见即所得的界面编辑器. Web界面使用拖拽轻松搞定，大大降低开发时间.
• 和其他Ajax框架，如jQuery, prototype, mootools充分兼容.
• 源代码开放。在LGPL许可下, 可免费应用于个人或商业目的.

相关日志

• 用js的json_decode解决JSON中文编码问题 (0)
• [转]jQuery Ajax 全解析 (0)
• [转]40 个轻量级 JavaScript 库 （下） (0)
• 转 在浏览器右键添加自定义菜单 (0)
• 用函数使JQuery ui dialog的按钮是否可用 (0)
• 整理实用JavaScript开发工具 (0)
• 利用PHP实现AJAX跨域HTTP GET (4)
• [转]利用javascript实现web页面刷新的方法 (0)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<script language="javascript" src="js/jquery-1.3.2.min.js"></script>
<script>
var times=0;//计时
var timer = false;
$(document).ready(function(){
	timedCount();
});
$(window).focus(function(){
	timer = true;
});
$(window).blur( function () {
 	timer = false;
}); 
function timedCount(){
	if(timer){
		times = times+1;
		showTime(times);
	}
	setTimeout('timedCount()',1000);
}
function showTime(tt){
	if(tt>59){
		mm = Math.floor(tt/60);
		if(mm<10){
			mm = "0"+mm;
		}
	}else{
		mm="00";
	}
	ss = tt%60;
	if(ss<10){
		ss = "0"+ss;
	}
	$('#timer').html(mm+":"+ss);
}
</script>
计时:<span id="timer">00:00</span>

相关日志

• 用函数使JQuery ui dialog的按钮是否可用 (0)
• 用js的json_decode解决JSON中文编码问题 (0)
• 整理实用JavaScript开发工具 (0)
• [转]利用javascript实现web页面刷新的方法 (0)
• [转]jQuery Ajax 全解析 (0)
• [转]javascript把数字格式化转换成货币型 (0)
• [转]40 个轻量级 JavaScript 库 （下） (0)
• [原创]用jquery做了一个复制流量的东西 (0)

ExternalInterface 类是外部 API，这是一个在 ActionScript 和 Flash Player 容器之间实现直接通信的应用程序编程接口，例如，包含 JavaScript 的 HTML 页。 Adobe 建议使用 ExternalInterface 实现 JavaScript 与 ActionScript 之间的所有通信。

详细官方帮助见:http://help.adobe.com/zh_CN/AS3LCR/Flash_10.0/flash/external/ExternalInterface.html

网上摘下来的例子:

在html中嵌入swf有两种方式，一种是用Flash CS3直接发布，还有一种就是大家都熟悉的swfobject。这里我没什么挑剔的，能解决问题就行。
这个例子是flash调用js函数funcWaitingForFlash，执行funcWaitingForFlash函数时再回调flash的func，仅供参考。
flash as3:

js:

相关日志

• 用js的json_decode解决JSON中文编码问题 (0)
• 整理实用JavaScript开发工具 (0)
• [转]利用javascript实现web页面刷新的方法 (0)
• [转]javascript把数字格式化转换成货币型 (0)
• [转]40 个轻量级 JavaScript 库 （下） (0)
• [转]25 个在 Web 中嵌入图表的免费资源 (0)
• js实现页面焦点计时 (0)
• AS3接收网页参数的方法 (0)

测试

JSLint –JavaScript的验证器

JSLint取得一个JavaScript源代码并对其扫描。如果发现问题，它送回信息描述问题状况及在源代码中的大概位置。问题不一定就出在句法上，不过常常正是这里出错。JSLint查看一些风格约定和结构问题，它证明不了程序是否正确。它只是提供了另一双眼睛来帮助发现问题。

测试还不如直接运行调试一下

调试

Firebug

作为最受欢迎的网页开发程序工具，Firebug是Firefox的一个插件，可以用它在任何网页上现时编辑，调试和监控CSS, HTML, 和JavaScript。它提供给JavaScript登陆和调试控制台一些有用的功能如AJAX requests logging，JavaScript解释器，DOM explorer等等。Firebug Lite 可以在IE, Opera, 和Safari上使用。

没得说非常好用.

HTTP监控

相关日志

• 用js的json_decode解决JSON中文编码问题 (0)
• [转]利用javascript实现web页面刷新的方法 (0)
• [转]javascript把数字格式化转换成货币型 (0)
• [转]40 个轻量级 JavaScript 库 （下） (0)
• js实现页面焦点计时 (0)
• flash AS3与javascript相互通信(例子) (0)
• 龙博AJAX框架 (0)
• 转 在浏览器右键添加自定义菜单 (0)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<!--[if IE]><script type="text/javascript" src="js/jquery.bgiframe.min.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery.datePicker.min-2.1.2.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="js/datePicker.css">
<script type="text/javascript">
	$(function()
	{
		$('.date-pick').datePicker({clickInput:true,createButton:false,startDate:'2000-01-01'}).val(new Date().asString()).trigger('change');
	});
</script>
<title>demo</title>
</head>
<body>
起始时间：
<input name="date1" class="date-pick" id="date1" size="10" width="80"/>
结束时间：
<input name="date2" class="date-pick" id="date2" size="10" width="80" />
</body>
</html>

jquery-1.3.2.min.js就不用说了.
date.js是一个日期格式的扩展,需要进行汉化一下.
jquery.bgiframe.min.js也是jquery一个组件.解决 IE6 z-index的问题,可以有可无.
jquery.datePicker.min-2.1.2.js就是今天介绍的日历选择组件了
实例中的用法:
$(‘.date-pick’).datePicker({clickInput:true,createButton:false,startDate:’2000-01-01′}).val(new Date().asString()).trigger(‘change’);
{clickInput:true,createButton:false,startDate:’2000-01-01′}这些是一下参数:
clickInput是点击输入框弹出,日历选择,默认false;
createButton是日历选择的按钮,由于点击输入框弹出,这里没有必要显示这个按钮了.
startDate是可以选择的开始日期,默认是今天.我这里需要选择以前的日期,所以调到2000年了.
跟多的参数请看datePicker官方文档.

至于datePicker的汉化问题,需要改两个文件,data.js还有jquery.datePicker.min-2.1.2.js.其实也简单只是吧英文改成中文就是了,需要注意的是jquery.datePicker.min-2.1.2.js编码需要改成UTF8,用DW可以轻松改改咯.
提供完整实例下载:
jquery.datePicker实例(已经汉化)
更多的例子请看官方网站http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

相关日志

• 用函数使JQuery ui dialog的按钮是否可用 (0)
• [转]jQuery Ajax 全解析 (0)
• [原创]用jquery做了一个复制流量的东西 (0)
• js实现页面焦点计时 (0)
• jQuery 1.3中新增的方法live()的应用 (0)
• 龙博AJAX框架 (0)
• 转 在浏览器右键添加自定义菜单 (0)
• 用js的json_decode解决JSON中文编码问题 (0)

实现效果:用户在网站A点击页面任意部分,触发一个纯正的<a href=’xxxx’>来打开网站B的链接.虽然不太文明,用户体现也比强制弹出页面好不了多少.不过用来短时间带来一部分垃圾流量还是比较有效的.

实现原理:JS新建一个透明的层,层上有隐藏的链接,这层是随鼠标移动的,所以用户在页面任意地方点击都是点击这个链接.点击之后自动清除这层.曾经在一个软件网站见过类似的应用,不过他固定在搜索栏,用户点击搜索栏的时候就弹出页面.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<script src="/js/jquery.js" type="text/javascript"></script>
var floatX,floatY,boxX,boxY,pageX,pageY;
var cX = document.documentElement.clientWidth;
var cY = document.documentElement.clientHeight;
$(document).ready(function(){
$("body").append('
<p id="float" style="padding:3px 5px;position:absolute;z-index:9999;"><a id="newlife" style="cursor:default;text-decoration: none;" href="http://www.newlova.com/" target="_blank">    </a></p>
');
$(this).mousemove(function(event){
var cX = document.documentElement.clientWidth;
var cY = document.documentElement.clientHeight;
pageX = event.clientX + $(window).scrollLeft();
pageY = event.clientY + $(window).scrollTop();
boxX = $('#float').outerWidth(true);
boxY = $('#float').outerHeight(true);
if(event.clientX>cX-boxX){
floatX = pageX-boxX;
}else{
floatX = pageX-15;
}
if(event.clientY>cY-boxY){
floatY = pageY-boxY;
}else{
floatY = pageY-10;
}
window.status='';
$('#float').css({top: floatY, left: floatX});
});
 
$(window).resize(function() {
cX = document.documentElement.clientWidth;
cY = document.documentElement.clientHeight;
});
$("#newlife").click( function () { $('#float').hide();$(window).focus();setTimeout("$(window).focus()",500)});
})

在firefox下面newlife层好像没对准,有心人自己调整一下吧,网页右边和下边的边也没算对.可以用就行,凑合吧.最后那里打开了新页面,焦点会撤换到新页面,这样好像不太舒服.又加了句setTimeout(“$(window).focus()”,500),不过只在IE6下面有效.

相关日志

• 用函数使JQuery ui dialog的按钮是否可用 (0)
• [转]jQuery Ajax 全解析 (0)
• js实现页面焦点计时 (0)
• jquery日历选择插件datePicker 简单汉化及应用实例 (1)
• jQuery 1.3中新增的方法live()的应用 (0)
• 龙博AJAX框架 (0)
• 转 在浏览器右键添加自定义菜单 (0)
• 用js的json_decode解决JSON中文编码问题 (0)

原文:http://ued.alipay.com/?p=707

=========================

关于跨域这个话题，很早就答应过要分享，但是因为懒，一直拖着，直到D2上有人谈起了“完美跨域”。“跨域”应该已经算不上什么难题了，只是提起“完美”这两个字，突然觉得有了新意，那就写点什么吧，至少对自己有个交代嘛！跨域方案有很多，接下来一一枚举，会给出demo，demo的宗旨是尽可能简单的让新手明白，各方案中跨域的原理，实际应用请酌情修改。

方案一、剪贴板

原理：IE本身依附于windows平台的特性为我们提供了一种基于iframe，利用内存来“绕行”的方案，在这里我称之为，本地存储原理。

缺点：不支持非IE浏览器，并且影响到用户对剪贴板的操作，用户体验非常不好，特别是在IE7下，受安全等级影响，会弹出提示框。

演示：[ 点此阅览 ]

子页面在子域：demo.ioldfish.cn下，在页面中加入如下代码获取页面高度并存入剪贴板。

主页面在主域：www.ioldfish.cn下，在页面中加入如下代码，获取剪贴板的值并赋值为子页面所在的iframe的高度。

方案二、document.domain

原理：设置了document.domain，欺骗浏览器

缺点：无法实现不同主域之间的通讯。并且当在一个页面中还包含有其它的iframe时，会产生安全性异常，拒绝访问。

演示：[ 点此阅览 ]

主页面在主域：www.ioldfish.cn下，子页面在子域：demo.ioldfish.cn下，在两个页面的头部都加入如下代码：

方案三、通过JS获取hash值实现通讯

原理：hash可以实现跨域传值实现跨域通讯。

缺点：对于父窗口URL参数动态生成的，处理过程比较复杂一些。并且IE之外的浏览器遇到hash的改变会记录历史，影响浏览器的前进后退功能，体验不佳。

演示：[ 点此阅览 ]

子页面在主域：www.lzdaily.com下，在页面中添加如下代码,因为hash是不受跨域限制的，所以可以将本页面的高度顺利的传送给主页面的hash。

主页面在主域：www.ioldfish.cn下，在页面中添加如下代码，首先取得子页面传递过来的hash值，然后将hash值赋到子页面所在的iframe的高度上。

方案四、传hash值实现通讯改良版

原理：该方案通过“前端代理”的方式，实现hash的传值，体验上比之方案三有了很大的提升。

缺点：对于父窗口URL参数动态生成的，处理过程比较复杂一些。

演示：[ 点此阅览 ]

子页面在主域：www.lzdaily.com下，在页面中添加如下代码,首先在页面里添加一个和主页面同域的iframe［也可动态生成］，他的作用就像是个跳板。C页面中不需任何代码，只要确保有个页面就防止404错误就可以了！该方法通过修改iframe的name值同样可以跨域传值，只是比较”猥琐“而已。

然后在页面中加上如下代码，利用页面C的URL接收hash值，并负责把hash值传给同域下的主页面。

主页面在主域：www.ioldfish.cn下，在页面中添加如下代码，获取从C页面中传递过来的hash值。这里应用到一个技巧，就是直接从A页面用frames["iId"].frames["iframeC"].location.hash,可以直接访问并获取C页面的hash值。这样一来，通过代理页面传递hash值，比起方案三，大大提高了用户体验。

方案五、JSONP

原理：有点脚本注入的味道

缺点：服务器端程序运行比脚本早，跨域交互时无法捕获前端页面元素的相关数据，比如自适应高度。

演示：[ 点此阅览 ]

主页面在主域：www.ioldfish.cn下，在页面中添加如下代码，动态创建一个script，然后指定到子域的动态文件，在动态文件后面可以添加参数，在这里我加了一个回调函数，当请求返回后，会运行这个回调函数。

子页面在主域：www.lzdaily.com下，在页面中添加如下代码，首先先取得主页面传过来的回调函数名，然后生成一段javascript代码，以回调函数带参数的形式返回主页面，这样就完成了跨域之间的通讯。由于服务器端程序执行总是优先于javascript代码，所以基本上没办法获取到子页面中DOM的相关数据，所以小白同学，我可以很负责人的告诉你，想通过这种方法实现跨域自适应高度是不可能的！

方案六、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，在页面加载的时候调用它，完成跨域的数据交互。注释中详细说明了参数的作用。

子页面在主域：www.lzdaily.com下，获取到页面高度后，将高度存到主页定义的Json中，Json标识为”PortalData”，这里可以自定义。

其实通过css也可以实现跨域，数据获取的实质其实就是动态载入一段CSS，然后解析其中的字段提取数据，这个方法比较“猥琐”，再这里就不多介绍了，当然flash也可以实现跨域，只是还没去实践，实践完了再补充。啥时候能补完呢？恩……

以上这么多方案，有可以“完美跨域”的吗？单一的看，我想没有吧，都有缺陷，但是只要不同情况下使用合适的方法，我想这才是最完美的！原来绕了一圈，我只是再说废话，哎！不论怎么样，还是希望这些废话对还在苦苦追求“完美”的同学们有所启发！

相关日志

• 龙博AJAX框架 (0)
• 转 在浏览器右键添加自定义菜单 (0)
• 用函数使JQuery ui dialog的按钮是否可用 (0)
• 用js的json_decode解决JSON中文编码问题 (0)
• 整理实用JavaScript开发工具 (0)
• 利用PHP实现AJAX跨域HTTP GET (4)
• [转]利用javascript实现web页面刷新的方法 (0)
• [转]jQuery Ajax 全解析 (0)

5. 字符串与数学函数 
Date.js
和日期打交道不是件容易事，有很多格式要处理。Datejs 可以很好地处理简单或复杂的日期函数。可以将日期解析出诸如“Next thursday”，“+2 years”一类的格式，也支持所有日期形式，如 2009.01.08, 12/6/2001。

Sylvester
一个处理矢量和点阵的数学 JavaScript 库，包含多维矢量和点阵建模类，以及在3D空间的一些模型。

Pretty Date 
一个很出色的 JavaScript 库，用一种很漂亮，很友好的方式显示日期，如下图所示。

XRegExp
JavaScript 中的 RegExp 对象已经支持正则表达式，XRegExp 增加了更多未来浏览器可能包含的功能（ECMAScript 4 – ES4）。该库对 RegExp 对象进行缓存，重用并增加了众多新功能。

JavaScript URL Library
一个用来处理 URL 的 JavaScript 库，可以对 URL 中的任意部分进行处理。
6. Fonts 
typeface.js
这个库可以让你在网页中使用任意字体，但和 sIFR 以及 FLIR 这些基于 Flash 的方案不一样，typeface.js 100% 基于 JavaScript，只需将你的字体文件上传到一个基于 Web 的生成器那里，再将生成的 JavaScript 文件下载回来包含到网页中即可。

Cufón
和 typeface.js 很相像，Cufón 也可以让你在网页中使用任意字体，同样，它也是使用一个生成器，将字体转换成 VML，将生成的 .js 文件包含到网页即可。
7. 调试与记录 
Blackbird
人们经常使用 Alert() 调试 JavaScript 程序，Blackbird 提供了一个漂亮的控制台记录，查看，过滤程序的运行。

NitobiBug
基于浏览器的跨浏览器 javaScript 对象记录与检查工具。

Firebug Lite
目前最好的 JavaScript 调试工具非 Firebug 莫属，然而该工具只支持 FireFox，将 Firebug Lite .js 文件插入你的网页，就可以在所有浏览器都实现 FireBug 功能。

8. 其它 
swfobject
这是一个最受欢迎的对 Flash 对象进行引用的方法。可以生成标准 swf 引用代码，并探测用户播放器版本。如果用户版本不支持，会显示备用内容。

sorttable 与 dragtable
不管你喜欢与否，table 仍然是最好的表现数据的方式，但可以更好地利用。sorttable 可以让表格数据排序，只需在 table 上加一个 class=”sortable” 标志，还可以排除指定的栏。dragtable 让表格的栏可以拖动，在表格上加上 class=”dragable” 标志即可，这两个类可以结合起来使用，只需加上 class=”sortable dragtable” 即可。

DD_roundies 与 DD_belatedPNG
DD_roundies 可以不依赖图片实现圆角功能，只面向 IE， 通过 VML 实现，其它浏览器会被略过，因为那些浏览器本身支持 CSS 圆角。

DD_belatedPNG 是为了解决 IE6 对 PNG 支持不好问题而开发的，不管 PNG 图片用于 src 还是 background-image，DD_belatedPNG 都能提供修补。

Custom JavaScript Dialog Boxes
一个只有 4.5K 的轻量 JavaScript 库，可以创建用户定制对话框，可显示4种类型的消息框，alerts, warnings, prompts, success。可以设定消息框标题，内容，以及过多长时间显示。

GameJS
GameJS 是微软的 XNA 游戏框架在 JavaScript 上的移植，使用 canvas 对象作为输出设备。JavaScript 不是最佳游戏平台，但对那些帧率较低的游戏也没有问题。

Shortcuts.js
从 Google Reader 和 Gmail 开始，Web 程序中的快捷键开始流行起来。Shorcuts.js 让快捷键的处理变得简单。

Mapstraction
有不少地图提供商都提供不同 API，如果你要更换提供商，比如从 Google Maps 到 MapQuest，需要更新代码，Mapstraction 提供了常用地图提供商的 API，只需该一行代码就能完成转换。

Amberjack
一个只有 4K 的微型 JavaScript 库，可以为你的网站添加漂亮的教程功能，一个模式窗口会以教程的形式显示任意内容，教程中的步骤可以通过手工编码实现或在线自动生成。可以使用主题或 CSS 控制内容的格式。

JsLoad
JsLoad 可以从 Google server 远程加载各种 JavaScript 库，可以自动加载各种版本的支撑库。

本文国际来源：http://www.smashingmagazine.com/2009/03/02/40-stand-alone-javascript-libraries-for-specific-purposes/
中文翻译来源：COMSHARP CMS 官方网站

相关日志

• 用js的json_decode解决JSON中文编码问题 (0)
• 龙博AJAX框架 (0)
• 整理实用JavaScript开发工具 (0)
• [转]利用javascript实现web页面刷新的方法 (0)
• [转]jQuery Ajax 全解析 (0)
• [转]javascript把数字格式化转换成货币型 (0)
• [转]40 个轻量级 JavaScript 库 （上） (0)
• js实现页面焦点计时 (0)

1. 表单相关 
wForms
一个低调的开源项目，简化了绝大多数常用 JavaScript 表单功能，包含可以直接使用的表单验证功能，另外，还包含强大的表单同步以及表单条件判断功能。

Validanguage
又一个低调的 JavaScript 表单验证框架。它拥有集成逻辑，一些设置可以针对全局，单个表单或单个对象。提供两个API，集成 AJAX 支持，缓存，以及回调函数。它提供类似 HTML 的 API 语句，以及面向对象的 JavaScript API 。

LiveValidation

一个轻量的表单验证库。除了传统的验证功能，还提供实时验证，可以一边输入一遍验证。Ruby on Rails 用户可能会发现这个库非常好用，因为他们的命名规则和参数十分近似。该库既有独立版本，又有一个 Prototype 版本。

yav
一个强大，灵活，可扩展的表单验证库。支持各种场合，从简单的如日期，电子邮件地址以及整数的验证，到复杂的，如正则表达式。内置 AJAX 支持，输出的错误消息可以定位到对象级。

qForms
处理表单的整套方案。功能包括各种验证规则，防止多次发布的机制，以及锁定或解锁制定输入框。

formreform
不基于 table 的多栏设计向来是一个挑战。这个微型库将传统的表单变成漂亮的多栏形式。

2. 动画相关 
$fx()
一个用来让 HTML 对象运动的轻量库。你可以在一个时间轴上改变任何 CSS 属性，对于复杂动画，你可以将各种效果结合起来，将对象分组，让它们并行运动。

JSTweener
一个生成中间帧的 JavaScript 库，它的 API 类似著名的中间帧引擎 Tweener。你可以指定动画时间，定义切换效果以及时延。在几乎任何点都可以触动事件。

Facebook Animation
一个强大的，用来创建可定制的，基于 CSS 的动画。在 Facebook 动画中，几行代码就可以改善 UI。语法和 FBJS （用于 Facebook 的库）一样。

FX
一个语法类似 YUI 的轻量 JavaScript 库，可以为几乎任何 CSS 属性创建中间帧。支持颜色和滚动动画，为对象设置 to 和 from 值就可以了。
3. 视觉与图形效果 
JS charts
支持柱状图，圆饼图以及简单的曲线图。直接将这个库插入网页，然后从 XML 文件或 JavaScript 数组变量调用数据。PNG 格式，兼容所有主要浏览器。

Canvas 3D JS Library (C3DL)
C3DL 使 3D 程序的编写变得简单。提供一套数学，场景与 3D 对象类，可以直接在浏览器中开发 3D 内容，不需要很深的 3D 知识。

Processing.js
这是 Processing 语言在 JavaScript 的移植。2D输出功能丰富。提供了绘图，色彩处理，字体，对象等处理函数。

Raphaël
一个让人惊叹的 JavaScript 库，可以在 Web 上实现矢量图。使用 SVG, VML 创建的图形可以被更改或绑定事件。功能极其丰富，包括旋转，动画，缩放等。

ImageFX
该 JavaScript 库为图片添加效果，如虚化，锐化，浮雕，加亮等。ImageFX 使用画布对象实现这些效果，兼容所有主流浏览器。这个库非常容易使用，只要将 .js 库文件插入网页，调用那些函数即可。

Pixastic
Pixastic 使用 HTML5 画布对象，允许对原始像素进行操作。效果包括去饱和度，灰度级，反转，亮度，对比度调整，色调，饱和度调整，以及浮雕，虚化等效果。因为用到了 HTML 5 的画布对象，因此还无法兼容所有浏览器。

Reflection.js
一个很低调的 JavaScript 自动实现倒影效果。倒影的高度，透明度可以调整。支持所有主流浏览器，文件尺寸小于5K。

4. 数据库 
Taffy DB
一个 JavaScript 库，可以看作浏览器中的 SQL Server，或高级数组管理器。在使用了 AJAX 的程序中，可以用作数据库层，可以创建，读取，编辑，删除数据，使用循环，排序以及高级查询。

ActiveRecord.js
这个库支持 Google Gears 以及 Chrome，Aptana Jaxer, Adobe AIR 以及任何支持 HTML 5 SQL 细则的平台（目前有 Webkit 以及 iPhone）。可以自动创建表，验证和同步数据。

本文国际来源：http://www.smashingmagazine.com/2009/03/02/40-stand-alone-javascript-libraries-for-specific-purposes/
中文翻译来源：COMSHARP CMS 官方网站

相关日志

• [转]40 个轻量级 JavaScript 库 （下） (0)
• 龙博AJAX框架 (0)
• 转 在浏览器右键添加自定义菜单 (0)
• 用函数使JQuery ui dialog的按钮是否可用 (0)
• 用js的json_decode解决JSON中文编码问题 (0)
• 整理实用JavaScript开发工具 (0)
• [转]利用javascript实现web页面刷新的方法 (0)
• [转]”完美”跨域 (0)

本文作者：QLeelulu

转载请标明出处！

jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。

废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).

1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。

这个方法可以很方便的动态加载一些HTML文件，例如表单。

示例代码：

$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post",
		function (responseText, textStatus, XMLHttpRequest){
		this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]
		//alert(responseText);//请求返回的内容
		//alert(textStatus);//请求状态：success，error
		//alert(XMLHttpRequest);//XMLHttpRequest对象
});

注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。

2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求

参数：

url (String) :  发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：

		$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
				//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
				this; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图
				alert(data);
				//alert(textStatus);//请求状态：success，error等等。
                                  当然这里捕捉不到error，因为error的时候根本不会运行该回调函数
				//alert(this);
		});

点击发送请求：

jQuery.get()回调函数里面的 this ，指向的是Ajax请求的选项配置信息：

3. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：

Ajax.aspx：

Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好！(这消息来自服务器)'}");

jQuery 代码：

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
		function (data, textStatus){
			// data 可以是 xmlDoc, jsonObj, html, text, 等等.
			//this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this
			alert(data.result);
		}, "json");

点击提交：

这里设置了请求的格式为”json”：

如果你设置了请求的格式为”json”，此时你没有设置Response回来的ContentType 为：Response.ContentType = “application/json”; 那么你将无法捕捉到返回的数据。

注意一下，alert(data.result); 由于设置了Accept报头为“json”，这里返回的data就是一个对象，并不需要用eval()来转换为对象。

4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。

参数

url (String) : 待载入 JS 文件地址。

callback (Function) : (可选) 成功载入后回调函数。

jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码：

加载并执行 test.js。jQuery 代码:

$.getScript(“test.js”);

jQuery 代码:

$.getScript("AjaxEvent.js", function(){
		alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同？");
});

加载完后请重新点击一下上面的 Load 请求看看有什么不同。

jQuery Ajax 事件

Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的，例如：

 $.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ...
 });

全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义：

 $("#loading").bind("ajaxSend", function(){
   $(this).show();
 }).bind("ajaxComplete", function(){
   $(this).hide();
 });

或者：

 $("#loading").ajaxStart(function(){
   $(this).show();
 });

我们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了：

 $.ajax({
   url: "test.html",
   global: false,// 禁用全局Ajax事件.
   // ...
 });

下面是jQuery官方给出的完整的Ajax事件列表：

function (XMLHttpRequest) {
  this; // the options for this ajax request
}

function (XMLHttpRequest, textStatus) {
  this; // the options for this ajax request
}

function (XMLHttpRequest, textStatus, errorThrown) {
  // 通常情况下textStatus和errorThown只有其中一个有值 
  this; // the options for this ajax request
}

function (data, textStatus) {
  // data could be xmlDoc, jsonObj, html, text, etc...
  this; // the options for this ajax request
}

$.ajax({
		type: "get",
		url: "http://www.cnblogs.com/rss",
		beforeSend: function(XMLHttpRequest){
			//ShowLoading();
		},
		success: function(data, textStatus){
			$(".ajax.ajaxResult").html("");
			$("item",data).each(function(i, domEle){
				$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
			});
		},
		complete: function(XMLHttpRequest, textStatus){
			//HideLoading();
		},
		error: function(){
			//请求出错处理
		}
});

$.ajaxSetup({
  url: "/xmlhttp/",
  global: false,
  type: "POST"
});
$.ajax({ data: myData });

<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2"
checked="checked"/> check2
  <input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>

相关日志

• 龙博AJAX框架 (0)
• 用函数使JQuery ui dialog的按钮是否可用 (0)
• 用js的json_decode解决JSON中文编码问题 (0)
• [转]40 个轻量级 JavaScript 库 （下） (0)
• [原创]用jquery做了一个复制流量的东西 (0)
• js实现页面焦点计时 (0)
• jquery日历选择插件datePicker 简单汉化及应用实例 (1)
• jQuery 1.3中新增的方法live()的应用 (0)