Web Frontend Develope, Design, Music, Life——Stay Hungry, Stay Foolish~
2009/12/29APP, Javascript/DHTML

0 Comments

Media Player播放器

一个视频的项目中用到了Media Player播放器，改了一下对方给的代码，发现里面的JS好像都是停留在2005年以前，索性自己重新写了一个。点此DEMO。

主要是通过JS来模拟播放器的时间，并且控制播放器的暂停、音量、播放位置，目前网上的Media Player的API不是很多，也是参考了对方之前的代码，其中有一个playState属性很重要，它的各个状态码代表了播放器的各个状态，所以在播放器加广告的操作都是通过这个来进行了。

网上看到的Mediaplayer属性和方法
属性/方法名：说明：
[基本属性]
URL:String; 指定媒体位置，本机或网络地址
uiMode:String; 播放器界面模式，可为Full, Mini, None, Invisible
playState:integer; 播放状态，1=停止，2=暂停，3=播放，6=正在缓冲，9=正在连接，10=准备就绪
enableContextMenu:Boolean; 启用/禁用右键菜单
fullScreen:boolean; 是否全屏显示
[controls] wmp.controls //播放器基本控制
controls.play; 播放
controls.pause; 暂停
controls.stop; 停止
controls.currentPosition:double; 当前进度
controls.currentPositionString:string; 当前进度，字符串格式。如“00:23”
controls.fastForward; 快进
controls.fastReverse; 快退
controls.next; 下一曲
controls.previous; 上一曲
[settings] wmp.settings //播放器基本设置
settings.volume:integer; 音量，0-100
settings.autoStart:Boolean; 是否自动播放
settings.mute:Boolean; 是否静音
settings.playCount:integer; 播放次数
[currentMedia] wmp.currentMedia //当前媒体属性
currentMedia.duration:double; 媒体总长度
currentMedia.durationString:string; 媒体总长度，字符串格式。如“03:24”
currentMedia.getItemInfo(const string); 获取当前媒体信息”Title”=媒体标题，”Author”=艺术家，”Copyright”=版权信息，”Description”=媒体内容描述，”Duration”=持续时间（秒），”FileSize”=文件大小，”FileType”=文件类型，”sourceURL”=原始地址
currentMedia.setItemInfo(const string); 通过属性名设置媒体信息
currentMedia.name:string; 同 currentMedia.getItemInfo(”Title”)
[currentPlaylist] wmp.currentPlaylist //当前播放列表属性
currentPlaylist.count:integer; 当前播放列表所包含媒体数
currentPlaylist.Item[integer]; 获取或设置指定项目媒体信息，其子属性同wmp.currentMedia

还遇到一个播放器进度条拖拽的问题，要兼容各个浏览器，通过原生的JS来做，主要是监听鼠标的三个事件onmousedown/onmousemove/onmouseup，这里有一篇文章“How to Drag and Drop in JavaScript”介绍的比较详细。

2009/12/23APP

0 Comments

互联网Widget编写分析

最近常用一个尚译的翻译widget，右键点击下面的“译”图片，选择右键菜单中的“将此链接加为书签”或“添加到收藏夹”;火狐或Chrome浏览器可以直接将此按钮拖到浏览器书签栏，添加成功后就可以运行这个widget了。

尚译

看一些它的书签URL: javascript:void((function(){if(window.Como&&window.Como.someyi){Como.someyi.open()}else{var%20a=document.createElement(’script’);a.setAttribute(’type’,'text/javascript’);var%20b=document.charset?document.charset:document.characterSet;var%20c=b.toLowerCase()==’gb2312′?’pack-gb2312.js’:'pack-utf8.js’;a.setAttribute(’src’,'http://yi.comsome.com/’+c);document.getElementsByTagName(’head’).item(0).appendChild(a);Text.prototype.tagName=’#text’}})())

格式化一下：

javascript: void((function () {
if (window.Como && window.Como.someyi) {
Como.someyi.open()
} else {
var a = document.createElement(’script’);
a.setAttribute(’type’, ‘text/javascript’);
var b = document.charset ? document.charset : document.characterSet;
var c = b.toLowerCase() == ‘gb2312′ ? ‘pack-gb2312.js’ : ‘pack-utf8.js’;
a.setAttribute(’src’, ‘http://yi.comsome.com/’ + c);
document.getElementsByTagName(’head’).item(0).appendChild(a);
Text.prototype.tagName = ‘#text’
}
})())

这个书签URL的作用是get尚译的js脚本，看一下这个脚本‘pack-utf8.js’，这个是压缩后的代码，格式化看了一下，生成了一个对象Window.Como，所有的对象都是在这个命名空间下，因为widget不依赖任何类库，所以脚本自己封装了一些对于Array/Funtion/Event/Object对象的方法，主要的对外的功能对象是Window.Como.somyi这个对象，其它的都是为这个对象而服务的，而翻译的功能是Google Translate的API来做的。

2009/12/21Life

0 Comments

第四届d2归来

周末在杭州滨江阿里巴巴大厦参加了第四届D2前端开发大会，一共是五个演讲，感觉收获还是挺大的。金大为的《模板语言与大前端》让我对基于数据的编程很感兴趣，克军的《从YUI2到YUI3看前端的演变》比当时在雅虎时他给我们分享的时候变化还是挺多的，虽然现在项目中我也在使用YUI3，但是还是有很多需要学习的，他的例子“通过YUI3来组织网站的结构”给我的启发比较大，之前我在做项目的时候，一般都是先把需要的组件做成一个JS，而其他的页面逻辑都放在一个JS，通过他的例子我看到了原来页面逻辑也是可以分成一块一块的，呵呵。腾讯的甄焱鲲讲的《SilverlightQQ》明显偏理论多一些，对于我们这些没有接触过Silverlight开发的人来说的确是一头雾水，不过他的PPT做的很赞，只有几页而且都是很形象化的图，他的演讲完全是从自己的经验来说的，感觉真的很专业，佩服。明城的演讲《前端安全概览与防范》虽然内容不是很多，但是他对每个攻击方法讲得都很细致，应该说演讲是成功的。秦歌的《前端性能优化和自动化》讲的也是挺深入的，之前我也对前端的性能有过关注，不过秦歌是先从最根本的网站交互响应过程讲起，然后再拓展到对于前端性能的影响，我对于前端性能这块理解也更深了些，还很赞的是看到了口碑的Image Sprite，很hack的技术，对于发布自动化这块之前在雅虎我们也做过这方面的尝试，对于开发效率确实会有不少的提高。
不得不说的是分享秀环节的hax和army的代码高亮PK，他们都是javaeye社区技术上的牛人，通过hax的演示可以看到好的算法可以极大地提高代码的运行速度，自己得多补补了。
这是第一次参加D2，感觉就像是一个前端开发者的盛会，也看到了很多老朋友，这个圈子其实是这么小，真希望中国的前端开发者会越来越专业，希望我们不必总是借鉴国外的技术而是自己能做出一些创新的东西出来。

2009/12/16Javascript/DHTML

0 Comments

深入理解正则表达式

刚刚又看了一下《Javascript权威指南》讲正则表达式这一节，看来要好好温习一下正则表达式了。

1.选择、分组、引用
! 选择 是从左到右考虑，直到发现了匹配项。
(…) 分组 将几个项目组合为一个单元，供此后的引用使用
(?:…) 只组合，不记住与改组匹配的字符
\n 和第n个分组第一次匹配的字符相匹配
例子：
/(['"])[^'"]*\1/ 匹配引号

2.正则表达式的锚字符
(?=p) 正前向声明，要求接下来的字符要与模式p匹配，但是不包括匹配中的那些字符
(?!p) 反前向声明，要求接下来的字符要不与模式p匹配

3.Javascript不支持的Perl RegExp特性
s(单行模式)和x(扩展语法)标志
\a, \e, \l, \u, \L, \U, \E, \Q, \A, \Z, \z和\G转义序列
(?<=正后向锚和(?<!反后向锚
(?#注释和其他(?扩展语法

4.用于模式匹配的String方法
search(reg) 返回与reg匹配的字串开始字符的位置
replace(reg, replaceStr/function) 如果replaceStr中出现了$加数字，那么replace将用指定的子表达式相匹配的文本来替换这两个字符
match(reg)
如果reg有g, 返回的数组a包含了匹配结果的数组，如’1 plus 2 is 3′.match(/\d+/g) 返回['1', '2', '3']；
如果reg没有g, 返回的数组a[0]存放的是完整的匹配，a[1]则是与第一个引用的字串，a[n]存放的是$n的内容，而且a有index和input属性，index是字符串中匹配开始处的位置，而input则是目标字符串的副本。
split(reg/splitStr) 将一个字符串分割为一个数组

5.用于模式匹配的RegExp方法
exec(str)
和match相同的是没有g的情况，执行这个方法返回的数组a与match无g的情况一样
和match不同的是有g的情况，a也是相同的，不过可以重复调用exec遍历一个字符串中所有匹配的正则表达式。
例子：
var pattern = /Java/g;
var text = ‘Javascritp is more fun than Java’;
var result;
while((result = pattern.exec(text)) != null){
alert(’Matched ‘+result[0]+’ at position ‘+result.index+’, next search begins at ‘+ pattern.lastIndex);
}
test(str) 调用test方法等价于调用exect方法，如果调用exec的返回值不为null，则调用test的返回值为true

6.RegExp的实例属性
每个RegExp对象都有5个属性:
source 只读，存放的是正则表达式的文本
global 只读，布尔值，说明该正则表达式是否具有标志g
ignoreCase 只读，布尔值，说明该正则表达式是否具有标志i
multiline 只读，布尔值，说明该正则表达式是否具有标志m
lastIndex 可读写的整数，对于具有标志g的模式，这个属性存储在字符串中下一次开始检索的位置，它由方法exec和test使用。

2009/12/13CSS, HTML, UI/UE

3 Comments

WebRebuild大会演讲《揭秘HTML5和CSS3》分享

昨天在WebRebuild大会上分享了《揭秘HTML5和CSS3》，现来总结一下。
PPT在这里：

View more presentations from Adam Lu.

互联网的发展总是在不断地催生新技术的产生，而HTML5和CSS3是最近一直被讨论的热门话题，对于每个互联网开发者尤其是前端开发者而言，都充满了好奇与渴望。那么HTML5和CSS3究竟有哪些让我们眼前一亮的东西呢？

HTML5

HTML 5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。那么我们来看一下HTML5的技术概览有哪些：

HTML5新增和移除的元素

HTML5新增了很多多媒体和交互性元素如video, audio，在HTML4当中如果要嵌入一个视频或是音频的话需要引入一大段的代码，还有兼容各个浏览器，而HTML5只需要通过引入一个标签就可以，就 像img标签一样方便。在页面布局和内容实现方面HTML5新增了很多结构化标签元素以及块级及语义元素，如果你要用HTML表示一个文件的上传进度条， 在 HTML5中你可以用progress这个元素来表示，它有一个value属性描述了已经完成了多少任务，还有一个属性max描述了这个任务一共需要多 少，还可以通过DOM接口得到这个进度条的position属性(只读)，也就是任务完成的百分比。Youtube在HTML5技术上已经做了一个尝试，http://www.youtube.com/html5(需要翻墙) 是用HTML5做的一个DEMO，从整个页面源代码来看，非常简洁。当然HTML5也对一些元素新增了一些属性，如input和textarea的 placeholder属性，相当于输入框的输入提示，script有一个async属性会影响脚本的加载和执行。对于所有的HTML共有的属性我们通常 把它称作是“全局属性”，如class, id, tabindex, title，HTML5也新增了一些全局属性，如contenteditable, contextmenu, hidden等属性。HTML5还增加了对于微数据的支持，如HTML5新增的item, itempro, subject等属性。

当然HTML5也移除了一些表示页面展现的元素，如font, center, strike等，这些本应该是CSS来做的，所以还是很好理解的，也移除了一些影响网站可访问性的元素如frame, frameset, noframe以及一些不常用的元素如acronym，而采用abbr来表示缩写。HTML5还移除了一些影响客户端兼容性的HTML熟悉，如link的 rev属性，td的scope属性；HTML5也移除了一些表示页面展现的属性如一些元素的align,bgcolor属性。

HTML5对表单的支持

HTML5 提供了强大的控件类型如url, email, date, tel等，强大的约束属性，如required表示必填，文件上传的accept属性，以及一些表单重复元素模型的支持，HTML5在提交表单的时候还可 以设置提交的方式为XML提交方式，这样服务器端接收到的数据将是XML格式，HTML5的表单被定义为“Web Forms 2.0”，目前opera9.5+对Web Forms 2.0的支持较为完美。

点此查看Web Forms 2.0 DEMO，需要Opera9.5+

HTML5 DOM变化

HTML5在DOM LEVEL 2 HTML方面很多都是继承自HTMLDocument的接口，当然HTML5在DOM上也有一些值得注意的新成员，如：支持 getElementsByClassName，可以根据class类名选择元素，getSelection()将会返回当前选中的对象，在选择器上面有 两个方法querySelector和querySelectorAll可以根据 css选择符来获取要查询的元素，相当于YUI3中的Y.one和Y.all。

HTML5的Javascript APIs

HTML5在Javascript上面新增了哪些API呢？

  • Video/Audio: HTML5为Video和Audio提供了API来让开发者控制他们自己的用户界面，如可以播放或暂停媒体内容。
  • Canvas: Canvas是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做 简单的(和不那么简单的)动画。Canvas是一个神奇的东西，它给我的第一感觉就像是在用Photoshop一样，它的每一个方法跟Photoshop 是那么地相似，通过canvas.getContext(’2d’)就可以得到这个canvas的API，你可以通过fillStyle设置其填充颜色或 是通过strokeStyle设置其描边颜色，甚至它画路径的操作跟Photoshop的钢笔操作更是不谋而合。Canvas在很多网站都已经有应用，如Firefox的实时下载状态统计，甚至还可以用canvas来编写Web Game。
  • Drag&Drop: 在指示设备的视觉媒体中，”Drag”的操作就是鼠标按下(mousedown)并伴随着鼠标移动(mousemove)的事件，而”Drop”则是鼠标 释放时触发的事件。在Drag&Drop里定义了DataEvent和DataTransfer接口，同时当拖拽操作发生时会触发如 dragstart, dragenter, dragleave, drop, dragend等事件。
  • Web Workers: 让Javascript多线程，可以在后台做很多工作而不会阻断当前的浏览器操作。
  • Geolocation: 地理位置定位，运行navigator.geolocation.getCurrentPosition(success,error)这个方法时浏览器 会提示是否要共享你的地理位置，如果选择共享，则会回调success函数，success函数有一个参数是position对象，这个position 对象有一个coords对象，coords对象包含了很多地理位置信息如latitude(维度)和longitude(经度)，这样就可以知道你的具体 位置了，这个功能在一些手机如Iphone上已经有广泛的应用了。
  • Application Cache: 这是HTML5对于离线应用的支持，通过在html元素上加一个属性manifest，浏览器会提示你是否要将数据缓存到客户端，如果用户选择了允许，则 会按照指定的manifest文件列表缓存需要的文件，当你的网络不可用时，你还是可以使用这个应用的。对于离线应用，Google也开发了Google Gears浏览器扩展，不过最后Google转投HTML5可能也是看到了HTML5存储和离线应用的这种优势。
  • Storage: Webkit已经实现了database storage，你可以像后端操作数据库一样查询数据并执行一些操作。还有一种存储是键值对存储，如sessionStorage和 localStorage，可以通过setItem和getItem来存储与获取值，相对于Cookie的存储来说，存储的容量要大很多。
  • X-Document Messaging: 浏览器因为安全和隐私的原因，阻止了不同域之间文档的通信，虽然这是一个安全限制，但是对于那些没有危害的不同域的文档通信带来了很多问题，但是 HTML5可以实现这种跨文档通信，让我们可以不用管源域是来自哪里，同时可以防止脚本攻击。

HTML5让你心动了吗？那么HTML5什么时候会成为标准呢？据说要等到2022年，这有一个很有意思的网站http://ishtml5readyyet.com/告诉你还有多少天HTML5会真正到来。

点击查看HTML5 DEMO，需要Firefox3.5+/Safari4.0+

CSS3

CSS3对于我们Web开发者来说不只是新奇的技术，更重要的是这些全新概念的web应用给我们带来更多无限的可能性，也极大地提高了我们的开发效 率。我们将不必再依赖图片或者Javascript 去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。

CSS3在选择器上面的支持

利用属性选择器我们可以根据属性值的开头或结尾很容易选择某个元素，利用兄弟选择器可以选择同级兄弟结点或紧邻下一个结点的元素，利用伪类选择器可 以选择某一类元素，CSS3在选择器上的丰富支持让我们可以灵活的控制样式，而不必为了选择某些元素给他们加上如”odd”或”even”这样的类名。

CSS3在样式上的支持

有一个调查说开发者最期待CSS3的特性是什么，最后票数最多的是“圆角”，不错，圆角这个功能可以给我们这些前端工程师省去很多时间和精力去切图 拼凑一个圆角。CSS3还支持阴影，盒阴影以及文本阴影，渐变，之前你可能是通过IE的滤镜看到过，其实CSS3实现起来更加方便。@font-face 可以自定义字体，如果用传统的方式，VD把一个带有特殊文字的设计图给你让你来实现的话你可能会把它做成一个图片，而通过CSS3用@font-face 就可以了。CSS3对于连续文本换行也新增了一个属性word-wrap,你可以设置其为normal(不换行)或break-word(换行)，这解决 了连续英文字符出现页面错位的问题，也不需要后端去截取这个连续字符。使用CSS3你还可以给边框加背景，这在iphone上也有应用的例子。CSS3在 背景上支持背景调整大小，如当你用一张大图要做一个小的元素背景时可以通过background-size来调整背景图的大小来适应这个元素。CSS3支 持opacity, rgba和hsl/a, opacity和rgba的区别是opacity设置的透明对其内容也会产生影响，而rgba只对你应用的元素产生影响。CSS3在布局上对于盒模型提供 了支持，可以设置box-sizing为content-box或border-box，应用为content-box就是正常的模式，而应用为 border-box和IE5.5的盒模型很相似，即元素的宽度包括border和padding，这个在布局上可能会比较方便，不用去管到底这个元素会 占用多大的宽度，而用content-box还需要手动计算一下这个元素实际占用的宽度。

CSS3对于动画的支持

CSS3支持的动画类型有：transform(变换)、transition(过渡)和animation(动画)。你可以对特定的属性设置 transition，transiton和animation的区别不大，animation的动画是自己定义的，面向的更多的是脚本开发者，往往更加 复杂。

为了使用大部分CSS3特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分CSS3属性。最常见的私有 属性是用于Webkit核心浏览器的(比如, Safari)， 它们以-webkit-开始，以及Gecko核心的浏览器(比如, Firefox)，以-moz-开始，还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀）

那我们在开发中该如何去用CSS3呢？

我觉得首先是遵循一个优雅降级的原则，比如前面谈到的圆角，我们可以针对Firefox和Safari等这些支持圆角的浏览器中应用CSS圆角，而 那些不支持CSS圆角的浏览器则显示为直角。其次就是对于不支持CSS3的浏览器可以使用Javascript来实现，如CSS3任何元素支 持:hover伪类，我们就可以对只支持链接:hover的IE6用JS来实现。最后就是在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不 能为了技术而技术。

点击查看CSS3 DEMO，需要Firefox3.5+/Safari4.0+

大家还是看PPT吧，从整个大会听下来，觉得克军的演讲《分层语义话模块实践》给我的印象挺深的，同时我也很赞同他的一个观点就是HTML往往被我们所忽视但往往是最重要的一部分，可能未来的几年就是HTML的时代了。

HTML, Javascript/DHTML

5 Comments

表单操作相关问题小结

1.form的action里无法传递参数
如<form action=”?module=trade&page=2″ method=”get”>，本来以为想当然地提交的时候会将module和page传递到后端，其实不然，只能通过<input type=”hidden” name=”module” value=”trade” /> <input type=”hidden” name=”page” value=”2″ />这种方式来提交。
PS: 当method为post的时候可以传递参数

2.创建<input>元素
本以为通过var input = document.createElement(’input’); input.name=”page”; input.type=”hidden”就可以，其实也不然，ie下只能通过document.createElement(’<input name=”page” />’); YUI就比较方便了，直接form.append(’<input type=”hidden” name=”page” />’);就可以了。

3.异步上传文件
我们知道通过Ajax无法实现上传文件，但是怎么来根据“异步”的这种机制来实现文件上传呢，参考YUI3的io-upload-iframe源码你就可以明白了，主要就是通过创建一个iframe，然后将表单提交到这个iframe里，因为form可以设置target，然后通过获取这个iframe的 contentWindow.document来获取响应。

function _create(o, c) {
var i = Y.Node.create('<iframe id="ioupload' + o.id + '" name="ioupload' + o.id + '" />');
i._node.style.position = 'absolute';
i._node.style.top = '-1000px';
i._node.style.left = '-1000px';
Y.one('body').appendChild(i);
// Bind the onload handler to the iframe to detect the file upload response.
Y.on("load", function() { _handle(o, c) }, '#ioupload' + o.id);
}
function _handle(o, c) {
var d = Y.one('#ioupload' + o.id).get('contentWindow.document'),
b = d.one('body'),
xml = (d._node.nodeType === 9),
p;
if (c.timeout) {
_clearTimeout(o.id);
}
if (b) {
// When a response Content-Type of "text/plain" is used, Firefox and Safari
// will wrap the response string with <pre></pre>.
p = b.query('pre:first-child');
o.c.responseText = p ? p.get('innerHTML') : b.get('innerHTML');
Y.log('The responseText value for transaction ' + o.id + ' is: ' + o.c.responseText + '.', 'info', 'io');
}
else if (xml) {
o.c.responseXML = d._node;
Y.log('The response for transaction ' + o.id + ' is an XML document.', 'info', 'io');
}
Y.io.complete(o, c);
Y.io.end(o, c);
// The transaction is complete, so call _destroy to remove
// the event listener bound to the iframe transport, and then
// destroy the iframe.
w.setTimeout( function() { _destroy(o.id); }, 0);
}
function _startTimeout(o, c) {
Y.io._timeout[o.id] = w.setTimeout(
function() {
var r = { id: o.id, status: ‘timeout’ };
Y.io.complete(r, c);
Y.io.end(r, c);
Y.log(’Transaction ‘ + o.id + ‘ timeout.’, ‘info’, ‘io’);
}, c.timeout);
}
function _clearTimeout(id) {
w.clearTimeout(Y.io._timeout[id]);
delete Y.io._timeout[id];
}
function _destroy(id) {
Y.Event.purgeElement(’#ioupload’ + id, false);
Y.one(’body’).removeChild(Y.one(’#ioupload’ + id));
Y.log(’The iframe transport for transaction ‘ + id + ‘ has been destroyed.’, ‘info’, ‘io’);
}
Y.mix(Y.io, {
_upload: function(o, uri, c) {
var f = (typeof c.form.id === ’string’) ? Y.config.doc.getElementById(c.form.id) : c.form.id,
fields,
// Track original HTML form attribute values.
attr = {
action: f.getAttribute(’action’),
target: f.getAttribute(’target’)
};
_create(o, c);
// Initialize the HTML form properties in case they are
// not defined in the HTML form.
_setAttrs(f, o.id, uri);
if (c.data) {
fields = _addData(f, c.data);
}
// Start polling if a callback is present and the timeout
// property has been defined.
if (c.timeout) {
_startTimeout(o, c);
Y.log(’Transaction timeout started for transaction ‘ + o.id + ‘.’, ‘info’, ‘io’);
}
// Start file upload.
f.submit();
Y.io.start(o.id, c);
……

2009/12/03Javascript/DHTML

2 Comments

浏览器阻止弹出窗口

在项目中遇到这样一个需求：用户提交表单的时候需要从后端取回数据后弹出新窗口，所以就存在一个问题，通过window.open()弹出的新窗口默认会被浏览器阻止，只有当用户允许才会被打开，很显然这对用户体验是不好的。浏览器对于用户触发的操作（如点击按钮，打开链接）是不会阻止的，当然也有很多方式可以解决，如通过在body附加一个form元素，然后设置其target为’_blank’，再提交这个form；或是一个a，设置其href, target, 然后通过YUI的simulate模拟点击事件。但是这些方式只能保证ie6和ie7下浏览器不阻止，而ie8+和firefox3.1+还是会阻止。暂时还没有找到好的解决方案，不知道谁有什么好的方法？

点此Demo

返回顶部