Submitted by gouki on 2010, May 20, 11:55 AM
司徒正美在看到老赵的博客鄙视IE6用户时，不甘寂寞，放出了一段残忍的代码，可以对IE6、7进行封杀处理。。
代码如下：
XML/HTML代码
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta content="IE=8" http-equiv="X-UA-Compatible"/>
- <meta name="keywords" content="IE6与IE7封杀器 by 司徒正美" />
- <meta name="description" content="IE6与IE7封杀器 by 司徒正美" />
- <script type="text/javascript">
- //使用setAttribute也行，值好像是固定，为1（读作"日"，日得好！）
- document.createElement("li").value = 1;
- </script>
- <title>IE6与IE7封杀器 by 司徒正美</title>
- </head>
- <body>
- <h1>杀！杀！杀！</h1>
- <h2>不行请刷新页面（这是运行框的问题）</h2>
- </body>
- </html>
还有一段是可以关闭当前窗口的：
XML/HTML代码
- window.opener=null;window.open('','_self');window.close();
我的博客不能执行代码，如果你想测试，你可以到http://www.cnblogs.com/rubylouvre/archive/2010/05/18/1738370.html进行享受。
Tags: ie6, ie7, firefox, chrome
Javascript | 评论:0
| 阅读:17017
Submitted by gouki on 2010, May 5, 9:19 PM
一直以来，我都是使用着firefox而不是chrome，虽然chrome的速度明显要比firefox快很多，但我还是使用着firefox，那是因为ff上面有很多插件是chrome没有的，比如firebug,yslow,scrapbook,readitlater,searchstatus等。但alipay uED居然推出了一款chrome上的插件，类似于yslow，让人感觉很意外，从图片上看，感觉不错：
Monster 是 Alipay UED 推出的网站代码分析、质量检测及评分的浏览器扩展，它能智能分析CSS、JS、HTML内容并生动形象展示网页得分情况(类似YSlow)。它是一个开源 项目，您可以在GoogleCode中心检出MonsterForChrome项目源代码。不久会推出Firefox版扩展。
Monster主要检测规则：
- 检测是否有重复ID的标签；
- 检测是否使用内联标签嵌套块级标签，如a嵌套div；
- 检测https协议页面，是否使用了http协议的图片、JS、CSS等；
- 检测compatMode、doctype是否出错；
- 检测是否使用了HTML5不再支持的标记，如font,s,u等；
- 检测标签是否正确关闭；
- 检测CSS、JS、background-image文件是否为404；
- 检测CSS、JS文件是否重复调用；
- 检测是否引用过多外部JS、CSS文件；
- 检测CSS、JS、HTML是否压缩；
- 检测CSS样式表是否使用了CSS expression；
- 检测Cookie是否超过30KB；
- 检测是否有form标签嵌套form标签；
- 检测是否直接在标签里定义JS事件，如<a href=http://www.google.org.cn/posts/”#” onclick=”…”>link</a>；
- 检测<meta charset=”utf-8″ />是否为<head>第一个子标签；
- 检测一个<form>标签内部是否出现二个input[type=submit]标签；
- 检测是否在<form>标签中使用了 id=”submit” 的标签；
- 检测是否将<style>块放置在</head>前面；
- 检测是否将<script>块放置在</body>前面；
- 检测<img>标签是否指定alt属性；
- 检测是否为input[text]指定label；
- 检测网页编码是否为gbk或utf-8；
- 检测是否使用了@import导入样式表；
- 如果CSS、JS指定 类似于“?t=20100405”时间戳，则自动输出最后修改时间，方便对比；
- 如果background-image超过6个，则提示所有背景图片及大小，超过30KB，标红显示；
Monster评分规则：
Monster是根据问题解决难易程度、性能提升程度、可用性提升程度以及维护性提升程度来综合评分的。具体，请下载 Monster评分算法.xls
下载Monster。
我没有试用过，不知道具体如何，我只能说，看上去真的很不错。而且，用上面的话来说，他们很快就会推出firefox版本，我又何必试呢？
Tags: chrome, yslow, firefox, monster, alipay
Software | 评论:2
| 阅读:24088
Submitted by gouki on 2010, April 26, 9:30 PM
html5 越来越近了，HTML5可能给我们带来很大的改变，就象新的标签可以支持视频了。看看javascript的架构师能够做什么吧。原文来自http://www.cnbeta.com/articles/109538.htm
由于当前技术仍偏向功能强化为主要思维，指令码趋向庞杂的结果，容易产生更多安全漏洞，且失去快速因应攻击调整架构的灵活性。
身 为JavaScript网路技术重要推手的雅虎（Yahoo!）架构设计师Douglas Crockford表示，现行网页开发技术思维仍偏重多媒体功能或浏览效能的提升，未来应以安全为第一优先。 Crockford 现为Yahoo!资深JavaScript架构师，负责YUI（Yahoo! User Interface）的架构设计，并且担任ECMA JavaScript 2.0技术委员会成员，为JavaScript开发社群大师级人物，此次受邀来台参加OSDC（Open Source Developer's Conference Taiwan）进行专题演讲，向国内开发者介绍ECMA JavaScript的发展。
Crockford向媒体阐述网络技术发展时指出，当前的网络技术仍然不脱过去的思维，网页开发技术仍以功能强化、浏览网页效能提升为主，虽然强 化了网络开发的丰富性，但未将网络安全列为开发优先考虑因素的结果，致使网络安全事件层出不穷。
延续过去网络开发思维的结果，现今网络技 术强调强大的互动、多媒体功能，但也让一些攻击手法兴起，以XSS（Cross-Site Scripting）为例，由于内嵌多个不同来源的脚本，容易让黑客借指令集趁虚而入，窃取用户端计算机的数据。
虽然也有新的技术，如 Google推动的Caja，用以防范XSS跨站攻击手法，但整体技术发展方向仍是朝功能、效能提升前进。
以HTML 5技术为例，Crockford表示，虽然HTML5增加了许多功能，但让整个脚本变得更为庞大且复杂，容易产生漏洞遭到攻击；另外，支持存取使用者电 脑、手机的终端数据，将数据被窃的安全风险扩大至手机上，而过于庞大复杂的结果，不容易因应日新月异的攻击手法改变，长期而言易形成安全风险。
对 于当前浏览器业者形成速度竞赛，纷纷强化JavaScript引擎加速网页浏览速度，号称最快的浏览速度，他认为，浏览器加速网页浏览速度虽是好事，但这 样改善方式有限，只在5至10%的终端浏览器部份加速，若能同时改善服务器端，加速的效果更大。
对于制定中的新标准ECMA Script 5，他乐观预期未来将成为主要的网络开发标准，虽然Apple、Chrome还不明确，但包括IE、FireFox、Opera都倾向ECMA Script 5，今年应会看到新的浏览器应用。
--EOF--
HTML5已经被越来越多的浏览器所支持，IE还能挺多久？是否又会创造出什么新标准？从IE4开始，多少网页设计师为了兼容所有的浏览器而痛苦？以后又会怎么样？IE6还有这么多用户，怎么办？这一些都让人迷惘啊。HTML5来了，对于前端工程师的压力就要更大一点了。代码没写好，很可能就直接被人利用了。以前的XSS漏洞可能会被更加扩大、放大。还是需要多学一点安全了
Tags: html5, ecmascript, javascript, chrome, yahoo
Javascript | 评论:0
| 阅读:18289
Submitted by gouki on 2010, February 21, 1:30 PM
不知道你是否注意过，在firefox或者Chrome下面，即使没有定义input type=submit，只要点击任何一个button，都能触发form 的submit事件，这是为什么呢？
看看这篇文章吧，介绍的有点详细，把它留下来是因为我一向属于知其然不知其所以然，只知道问题所在，和如何解决，从来不深究它的内涵，这也是我为什么水平上不去的原因。。。所以，不要学我，还是看完这篇文章吧。。。虽然不一定详细，但毕竟知其一部分所以然了。
原文来自：不同浏 览器对回车提交表单的处理办法
内容如下：
在浏览器中填写表单的时，可以直接在“文本框”中敲击“Enter”来提交表单，很是方便。条件是：
1、<form>属性的“action”字段必填；
2、有一个type="submit"的“input”。
- 在Chrome和Safari下 满足第一条即可。（注释1）
所以，如果要控制提交行为的话（比如，提交前检查必填项是否已填），可以在type="submit"的“input”后添加 Javascript“onXXX（比如onClick）”事件。而如果需要用异步交互来检测相关字段，则无效了。因为return false是作为onreadystate=的子函数，并不能控制全局。这时就需要用到<form>的 “onsubmit”属性(注释2）。比如：
HTML
<form name="form1" id="form1" action="act.php" method="post" onsubmit="myfn();return false;">
- myfn()是自己定义的函数：无论通过什么办法 （比如敲击“enter”或点击type="submit"（而不是type="button"）的“input”按钮）提交，都会触发这个这个函数。于 是，大可不必再在type="submit"的“input”后添加Javascript事件“onXXX”了。直接在“onsubmit”中控制，更直 观与统一，除非有意控制提交方式（是onClick还是什么）。
- return false位于末尾，表示不提交本表单。提交表单的字句document.form1.submit()可以作为myfn()的一个选择条件的分支。
总结：
这样，<form>有“action”和“onsubmit”属性，有type="submit"的“input”的提交按钮后， 就可以在任何浏览器下（不行吗？请给我反馈）实现使用“Enter”键和鼠标都可以对表单的相关字段进行异步（Ajax）和同步（单纯的 Javascript）检查并予以提交。
其他：
1、如果使用type="button"来异步检测相关字段呢？
这样，这个“input”必须得有一个事件触发器。在IE和FF下，无法直接在文本框中按下“Enter”来提交表单。如果要的话，需要使用额 外的函数来监听用户按下了什么，给出一个怎样的反映（注释3）。更糟糕的是，在Ch和Sa下，会忽略是否有type="submit"按钮，而直接根据 “action”属性来提交表单，如此以来，便无法实现预期的检测，可能还有更麻烦的后果。
2、如果不写“action”属性，直接异步提交表单呢？
这样，通过异步的方式提交表单，而不仅仅是检测，这个属性则没有必要。而且还是多余。假如这样能提供更好的用户体验，何乐而不为呢？呵呵。
【参考】
1 在IE8，FF，Ch中测试有效。Opera和Sa没有测试。参考了这篇文章（http://tieba.baidu.com/f?kz=669494938）
2 这篇文章（http://blog.csdn.net/xiewhenwe/archive/2009/11/08/4785469.aspx） 给了我借鉴
3 参考我以前的文章（http://www.cnblogs.com/lamper/archive/2010/02/06/1665117.html）
Tags: form, firefox, chrome, ie, submit
PHP | 评论:0
| 阅读:27557
Submitted by gouki on 2010, February 8, 10:31 AM
很意外，一直都认为firebug不会为chrome写插件了。毕竟chrome自带了一个F12的debug工具。
4。0开始后的chrome逐渐开始支持插件，然而，插件网站却不是每次打开都正常。也让我非常郁闷。
不过，看过chrome的插件编写的hello world，却真的发现，它的编写比firefox的插件简单的多。
上面都是闲话，真正想说的还是firebug，自从前两年firebug为IE出过lite版本后，更新幅度就小了很多，所以这次看到它为chrome做的更新，还是不禁想尝试一下的。
OK，上官方的菜，Firebug自己认为：
Firebug Lite: doing the Firebug way, anywhere.
- * Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome
- * Same look and feel as Firebug
- * Inspect HTML and modify style in real-time
- * Powerful console logging functions
- * Rich representation of DOM elements
- * Extend Firebug Lite and add features to make it even more powerful
不过作为chrome插件，它还仅仅是一个beta版，他这么介绍的：
XML/HTML代码
- Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.
-
- o get more information about what's new in Firebug Lite 1.3 beta (which is compatible with all major browsers) please visit the beta release page.
可以到这里进行下载：http://getfirebug.com/releases/lite/chrome/
Tags: firebug, chrome
Software | 评论:0
| 阅读:22432
