运维进行时

利用Monster给页面做体验

Sat, 08 May 2010 14:57:46 +0000

Monster是 Alipay UED 推出的网站代码分析、质量检测及评分的浏览器扩展，它能智能分析CSS、JS、HTML内容并生动形象展示网页得分情况(类似YSlow)。它是一个开源项目，您可以在GoogleCode中心检出Monster For Chrome项目源代码。不久会推出Firefox版扩展。

视频演示(See the demo)：
低质量版1：http://v.youku.com/v_show/id_XMTcwNDg2Mjgw.html
低质量版2：http://www.tudou.com/programs/view/N9KLcxb-0PA/
提示：安装插件时需要翻墙

使用截图

1、分析结果有错误、警告、信息及分数，对应的规则可以根据自己的需求进行修改。
2、查找出页面中出现的断链接，如404请求URL。

详细分析清单

定位页面错误及警告位置

该插件无论是UI人员还是系统管理员都是非常棒的辅助工具，感谢NetSeek的推荐。

Tags - chrome插件 , monster

IP地址输入框

Wed, 15 Aug 2007 11:17:36 +0000

Tags - ip地址

JS也玩OO继承

Wed, 15 Aug 2007 11:07:43 +0000

jvascript实现的OO方法：

Tags - oo

谈Iframe标记的使用

Wed, 15 Aug 2007 10:57:48 +0000

       纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？
答案很肯定：应用Iframe标记！一、Iframe标记的使用
       提起Iframe，可能你早已将之扔到“被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。
       Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。
现在我们谈一下Iframe标记的使用。
Iframe标记的使用格式是:

src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："画中画"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;
FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。
比如:

二、父窗体与浮动帧之间的相互控制
       在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
1、在父窗体中访问并控制子窗体中的对象
       在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。
比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：

test.htm文件代码为:

如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:

在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
2、在子窗体中访问并控制父窗体中对象
       在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
如example.htm：

如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：

这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。
试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？
Tags - iframe

HTC教程

Wed, 15 Aug 2007 10:35:05 +0000

　　在微软IE 5.0版本的浏览器发布以前，网页编程中面对的最大挑战就是不能轻易地创建组件，以达到代码重用和多页面共享的目的。这个问题一直困扰着DHTML（动态 HEML）的网页编程者。他们只能不断地重复书写HTML、CSS和javascript的代码，以满足多个页面上的重复或相似的功能。自IE 5.0浏览器发布后，这种情况得到了改善，它带给我们一个新的指令组合方法，可把实现特定功能的代码封装在一个组件内，从而实现多页面的代码重用，使网页编程进入一个全新的天地。这个新的技术就是我们要谈到的DHTML中的“行为”（Behaviors）。
　　“行为”作为一个简单易用的组件，它封装了页面上特定的功能或动作。当把一个“行为”附到WEB页面中的一个元件上时，这个元件的原有行为就会有所改变。因此，网页编程者可以开发通用的DHTML指令，并改变原有对象的一些属性，用“行为”来增强一个对象的功能，同时也简化了页面的HTML代码。而且“行为”的创建和使用也非常简单方便，所需的知识也只是原来已经习惯使用的CSS样式表、HTML指令和javascript脚本语言。只要你对此有所了解，有过实际编程的经历，学习并掌握“行为”的使用完全没有问题。我们将以一个改变字体效果的“行为”组件为例来说明如何编写和使用一个“行为”，并体验“行为”给页面编辑带来的优点和方便之处。
　　首先新建一个名为font_efftce.htc的文本文件，组成“行为”组件的文件都是以.htc为扩展名，这个文件中的内容就是我们对这个“行为”的描述。它的创建和使用步骤如下：
（1）首先给这个“行为”增加几个事件响应，语句书写格式如下：

　　“EVENT”对应所需事件名，在这里分别为：onmouseover,onmouseout,onmousedown,onmouseup四个事件名，你当然可以再增加其它的事件名来满足你的特定需求。“ONEVENT”对应着个自的事件句柄，即事件触发时所调用的函数名称。glowit()函数使字体周围产生一个红色的辉光。noglow()函数是消除字体的辉光效果。Font2yellow()函数是把字体颜色改为黄色。Font2blue()函数是把字体颜色改为蓝色。四个事件的定义都是相似的。
（2）接下来，再给这个“行为”增加二个“方法”定义，内容如下。

　　“NAME”参数对应的是给定的“方法”名称。move_down和move_right分别是向下和向右移动的“方法”对应的函数名称。注意，在方法名的后面不要带“( )”括号，即不要写成“move_down()”这个样子，这在“方法”定义的语法上是不允许的。
（3）接下来的工作就是在我们熟悉的DHTML环境下，用javascript脚本语句编写“事件句柄”和“方法”所对应的函数内容，实现预期的效果。具体内容参考下面的源程序。其中的“element”参数指的是这个“行为”所附着的对象，因为“行为”总是被附着到页面的元件上面，并通过这个元件发挥作用。其它语句都是DHTML的编程内容，就不再多说了。如有不明之处，可参考微软的MSDN开发文档中有关IE浏览器的内容，上面有详细的DHTML编程参考内容、属性和方法使用说明等，并包含了大量的文章和举例程序。经常访问微软的MSDN文档，尤其对于初学者来说是一个良好的学习习惯，你几乎可以得到任何你想找的答案，它的网址为：http://msdn.microsoft.com/ie/。
　　完整的“行为”文档“font_effect.htc”的内容如下：

////////////////////////////“行为”文档开始/////////////////////////////////// 
//给“行为”增加四个鼠标事件 
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" /> 
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" /> 
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" /> 
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" /> 
//给“行为”定义二个方法 
<PUBLIC:METHOD NAME="move_down" /> 
<PUBLIC:METHOD NAME="move_right" /> 
<SCRIPT LANGUAGE="JScript"> 
//定义一个保存字体颜色的变量 
var font_color; 
//定义向下移动文字的方法 
function move_down() 
{ 
element.style.posTop+=2; 
} 
//定义向右移动文字的方法 
function move_right() 
{ 
element.style.posLeft +=6; 
} 
//定义鼠标onmouseup事件的调用函数 
function font2blue(){ 
if (event.srcElement == element) 
{ 
element.style.color='blue'; 
} 
} 
//定义鼠标onmousedown事件的调用函数 
function font2yellow(){ 
if (event.srcElement == element) 
{ 
element.style.color='yellow'; 
} 
} 
//定义鼠标onmouseover事件的调用函数 
function glowit() 
{ 
if (event.srcElement == element) 
{ 
font_color=style.color; 
element.style.color='white'; 
element.style.filter="glow(color=red,strength=2)"; 
} 
} 
//定义鼠标onmouseout事件的调用函数 
function noglow() 
{ 
if (event.srcElement == element) 
{ 
element.style.filter=""; 
element.style.color=font_color; 
} 
} 
</SCRIPT> 
//////////////////“行为”文档结束///////////////////////////////

（4）如何在一个页面上使用“行为”
　　在页面上使用“行为”组件，并不需要学习新的知识。所需的知识的也不过是CSS样式表和HTML的设置而已，请看下面的语句。

　　可以看出，这和以前我们已经熟知的样式表设置完全相同。上面的语句定义了一个样式名：“myfilter”，其中对我们来说比较新的内容是：“behavior:url(font_effect.htc);”，“behavior”是新增的“行为”属性名，这就是“行为”在样式表中的设置方式。括号中的内容是“行为”文档的文件名，本例中表明“行为”文档在与页面文件在同一个目录下，如果“行为”文档安置在其它目录下，在此参数的前面要加上相应的路径名，以保证可以正确地定位“行为”文档的位置。此“样式”中的其它内容就是普通的样式属性设置，可根据你的需要增减，但在此例中，由于使用了“glow”滤镜效果，至少要设置一个宽度（width）属性。通过以上的样式指定，我们就有了一个名为：“myfilter”的样式，它附带一个有字体变化效果的“行为”。如果你想要在一个页面元件上使用这个附带“行为”的样式，同样也很简单，只要把这个“样式名”安置在元件的属性设置区域即可，见下面的语句。
行为产生的文字效果

鼠标指向后产生辉光
　　以上语句里面没有什么新的内容，class='myfilter'就是我们所熟悉的样式设置。在第一个“span”标记的属性中还定义了一个“id”标记，稍后就会看到，这是用来演示调用“行为”内的“方法”而设置的。这样设置后，“span”元件中的内容就可以显示出“行为”组件内的预定效果：
1．鼠标指针移动到文字内容上时，在文字周围产生红色的辉光效果，同时文字变成白色。
2．当鼠标按钮按下时，文字颜色改变为黄色。
3．鼠标按钮抬起后，文字颜色又改变为蓝色。
4．当鼠标指针移动到文字区域以外时，去掉了红色辉光效果，文字恢复原样。
　　另外，我们在定义“行为”时设置了二个“方法”，“move_down”和“move_right”。为调用这二个“方法”，定义了二个按钮：

　　用按钮的onclick事件去调用这二个“方法”，先前定义的“id”标记就作为元件的对象名称，用“myspan.move_down”来调用“方法”，操纵这个对象。可以看到，在按下相应的按钮后，会使第一行的文字产生向下或向右的移动。虽然只是用第一行文字做了示范，实际上，只要做相应的设置，你也可以移动其它对象。页面源文档的完整内内容如下：

　　通过以上的简单介绍，可以看出，我们很容易地在一个“行为”中同时组合了多种文字变化效果，通过简单的“样式”设置，任意地将它与页面元件相关连，体现了“行为”组件的优点和强大功能。一个“行为”组件，不仅能在一个页面内重复使用，也可供同一站点上的所有页面使用。试想一下，如果不使用“行为”来完成上述的效果，虽然可以在页面内调用一组预定的函数来完成同样的功能，但页面内每一个使用文字效果的元件都要附加四个鼠标事件，如果在多个页面内使用相同的效果，被调用的函数也需要在每一个页面内重复设置。相比之下，孰优孰劣是很明显的。所以，使用“行为”组件，可以制作出简洁、高效、通用和便于维护的页面。本文的举例只是为了说明“行为”组件的编写和使用过程，使读者对“行为”编程有一个概括的了解，并以此基础制作出自己所需要的“行为”组件，或直接引用满足个人需要的现成“行为”组件，因为“组件共享”的概念也是“行为”开发者的初衷。最后，愿本文能起到“抛砖引玉”的目的，使读者步入精彩的DHTML网页编程天地。
说明:
HTC是HTML component的缩写,
是IE5.0的主要扩展之一,
除了具备一般组件的可重用优点之外,
还具有易于开发使用等优点,
因为需要引入外部文件,这里就不举例了,宝库里有例子.
控件和组件
HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别，并且以“.htc”为后缀，
可以使用HTC实现以下行为：
设定属性和方法。通过“PROPERTY”和“METHOD”元素定义
设置自定义事件。通过“EVENT”元素实现，用该元素的“fire()”方法释放事件，
通过“createEventObject()”方法设置事件环境。
访问所包含该HTC的的HTML页的DHTML对象模型，使用HTC的“element"对象，返回
一个附加行为的元素，使用该对象，HTC可以访问包含文挡及它的对象模型（属性、方法、事件）。
收取通知，使用”ATTACH“元素实现，浏览器不但通知HTC标准的DHTML事件，而且通知HTC两种特殊事件：oncontentready事件和ondocumentready事件。
定义标记和命名空间
HTC的基础是自定义标记
要为页面定义自定义标记，必须为该标记提供命名空间
要使用该标记必须在该标记前加上正确的XML命名空间前缀
例如:
定义一个新标记RIGHT的例子
代码片断如下：

可以在单个HTML标记
中定义多个命名空间：

组件定义
组件的名字是由HTC文档里定义在第一行的XML命名空间决定的
该页不用调用其他的HTC话,就只有一个命名空间定义
实际上，HTML组件的定义就是自定义标签行为的定义
该行为包括一个属性和一个事件：

其中的oncontentready是在组件被调用者完全导入时触发
再看看fnInit()

组件的调用

Tags - javascript , htc

一些常见的问题与解决代码

Wed, 15 Aug 2007 10:30:43 +0000

第一页的内容有：
      检查是否为首页，判断一个层是否被隐藏，网站滚动文字带超链接，如何在javascript中使表单中的一个按钮无效， JS移动功能让表格移动，刷新框架， ID与name的区别，文字做按扭提交表单，图片reset表单，页面有多个CSS做个checkbox让用户选择， iframe适应高度，屏蔽右键，网页屏保，定义起始窗口大小，输入字母数字的正则表达式，不随页面滚动的层，一个表单里的同一个按钮提交两个页面，判断是不是数字， alt和title的分行；
第二页的内容有：
      关闭窗口ie不弹确认框，判断分辨率，图片滚动的效果，按button粘贴到text里，打印网页中的某一个区域，关闭窗口三种办法，让标题动态，两数相加，字符正则，输入数字正则，输入中文正则，隐去工具栏，同一个页面多种超链接样式， js动态给一个DIV插入一个表格，超出表格宽度自动换行， form问题， CSS在文字下面加两横，回车提交表单，文字不可修改；
第三页的内容有：
      通过层来实现渐淡淡出，取消选取、防止复制，关闭输入法，永远都会带着框架，防止被人frame，网页将不能被另存为，删除时确认，取得控件的绝对位置，光标是停在文本框文字的最后，屏蔽功能键Shift,Alt,Ctrl，网页不会被缓存，怎样让表单没有凹凸感，

&的区别，让弹出窗口总是在最上面，不要滚动条，怎样去掉图片链接点击后图片周围的虚线，电子邮件处理提交表单，子窗口刷新父窗口，在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动，检查一段字符串是否全由数字组成
第四页的内容有：
限制下拉选择宽度，窗口的宽度和高度是图片高和宽，弹出的窗口居中，用ＴＥ弹出ＩＥ窗口，单击表格中某个单元格则这个单元格变颜色，单选框问题，鼠标经过表格变色， tbody区域滚动条，三级下拉菜单，背景快速闪烁，背景不停变化，跟随鼠标旋转背景， RGB颜色转换，背景色调色板，滚动的超级链接，闪烁的霓虹灯，随次数变化提示，动态编辑表格，取得本地计算机名；
第五页的内容有：
进度条上端加图片， CSS控制表格交替颜色。
Tags - javascript , 总结