Javascript给元素添加事件

[不指定 2007/09/18 19:02 | by ipaddr ]

最简单的是这样:

<input type="button" onclick="alert(this.value)" value="我是 button" />

动态添加onclick事件:

<input type="button" value="我是 button" id="bu">
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick= objclick;
function objclick(){alert(this.value)};
</script>

如果使用匿名函数 function(){},则如下面所示:

<input type="button" value="我是 button" id="bu">
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick=function(){alert(this.value)};
</script>


FF中应该使用bObj.click=function() {}

上面的方法其实原理都一样,都是定义 onclick 属性的值。值得注意的是,如果多次定义 obj.onclick,例如:obj.onclick=method1; obj.onclick=method2; obj.onclick=method3,那么只有最后一次的定义obj.onclick=method3才生效,前两次的定义都给最后一次的覆盖掉了。

再看 IE 中的 attachEvent:

<input type="button" value="我是拉登" id="bu">
<script type="text/javascript">
var bObj = document.getElementById("bu");
bObj.attachEvent("onclick",method1);
bObj.attachEvent("onclick",method2);
bObj.attachEvent("onclick",method3);
function method1(){alert("第一个alert")}
function method2(){alert("第二个alert")}
function method3(){alert("第三个alert")}
</script>

执行顺序是 method3 > method2 > method1 ,先进后出,与堆栈中的变量相似。需要注意的是attachEvent 中第一个参数是on开头的,可以是 onclick/onmouseover/onfocus 等等

据说(未经确认验证)在 IE 中使用 attachEvent 后最好再使用 detachEvent 来释放内存

再看看 Firefox 中的的 addEventListener:

<input type="button" value="我是布什" id="bu">
<script type="text/javascript">
var bObj = document.getElementById("bu");
bObj.addEventListener("click",method1,false);
bObj.addEventListener("click",method2,false);
bObj.addEventListener("click",method3,false);
function method1(){alert("第一个alert")}
function method2(){alert("第二个alert")}
function method3(){alert("第三个alert")}
</script>

可以看到,在 ff 中的执行顺序是 method1 > method2 > method3 , 刚好与 IE 相反,先进先出。需要注意的是 addEventListener 有三个参数,第一个是不带“on”的事件名称,如 click/mouseover/focus等。

实现IE与Firefox的DHTML

[不指定 2007/09/18 10:28 | by ipaddr ]

1.在访问某一节点时,如 childNodes[i],要获得这个节点的值,这个值是<![CDATA[]]类型,在IE中,可以这样访问 childNodes[i].text,childNodes[i].firstChild.nodeValue;在Firefox中只能通过childNodes[i].firstChild.nodeValue访问.

2.
<root>
<e>text</e>
</root>

以上的XML,在IE中,<e>是<root>的第一个子元素,可以通过 root.childNodes[0],或root.firstChild访问<e>,但在Firefox中,<e>是<root>的第二个子元素,第一个子元素是换行符,nodeType是#text,如果将代码改为以下:

<root><e>text</e></root>

那么IE与Firefox都是一样的,<e>都是<root>的第一个子元素.

3.insertRow,insertCell
在IE中,insertRow()如果没有指定参数,则在表格后面添加行,默认参数为-1,如果在Firefox中,则一定要指定参数,如insertRow(-1),否则会出错.

4.select options
在IE中,在select.options集合中添加一个option,需要先将创建的option添加到options中,再指定option的text和value的值,在firefox中,则相反,需要先指定值,后添加.
如:
var opt=document.createElement("OPTION");
opt.innerHTML="option";
opt.value="value";
oSelect.options.add(opt);
(IE中报错:参数无效)

以上代码在IE中运行会出错,在Firefox中则正常插入option
以下代码,则在IE中正常,在Firefox中则出错:
var opt=document.createElement("OPTION");
oSelect.options.add(opt);
opt.innerHTML="option";
opt.value="value";
(在Firefox中警告: ID/NAME 所引用的元素位于全局范围。请使用 W3C 的标准形式 document.getElementById() 。)

5.attributes
在IE中,访问某个元素(element)的属性(attributes)时,是通过索引来读取的,即你要知道你要读取的属性是在哪个位置,如:<tag name="li" type="elment" />,如你要读取属性 type,那么在IE中是通过索引的,即: oTag.attributes[1]。但在Firefox中可以用属性名来索引,如 oTag.attributes["type"] 。如果想通过名字来读取属性,那么可以用attributes的方法 getNamedItem,如前面,读取 type 属性的值,可以这样: oTag.attributes.getNamedItem("type").value

6.Opacity(透明度)
在IE或Firefox中都可以设置元素的透明度,最低透明度是0%,最高是100%,在IE中设置元素的透明度是通过元素的style.filter="alpha(opacity=30)" 来设置的,而firefox是通过style.MozOpacity设置的,而且设置的值有点不同,IE是通过百份值,如80(即80%),而firefox对应的值是 .8 (对应80%) 。

需要注意的是:

1.element要用getElementById or ByTagName来得到,

2.setAttribute("class", vName)中class是指改变"class"这个属性,所以要带引号。

3.IE中要把class改成className,.....IE不认class,所以最好写两句,都用上吧。

W3C DOM - {setAttribute()}

setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

1、关于class和className
class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。使用setAttribute("class", vName)语句动态设置
Element的class属性在firefox中是行的通的,在IE中却不行。因为使用IE内核的浏览器不认识"class",要改用"className";
同样,firefox 也不认识"className"。所以常用的方法是二者兼备:
   element.setAttribute("class", vName);
   element.setAttribute("className", vName);  //for IE

2、setAttribute()的差异
我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。
var bar = document.getElementById("foo");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");
这里利用setAttribute指定e的onclick属性,简单,很好理解。但是IE不支持,IE并不是不支持setAttribute这个函数,
而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性
在IE中是行不通的。为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。
document.getElementById("foo").className = "fruit";
document.getElementById("foo").style.cssText = "color: #00f;";
document.getElementById("foo").style.color = "#00f";
document.getElementById("foo").onclick= function () { alert("This is a test!"); } 

1. document.form.item 问题
    (1)现有问题:
        现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行
    (2)解决方法:
        改用 document.formName.elements["elementName"]
    (3)其它
        参见 2


2. 集合类对象问题
    (1)现有问题:
        现有代码中许多集合类对象取用时使用 (),IE 能接受,MF 不能。
    (2)解决方法:
        改用 [] 作为下标运算。如:document.forms("formName") 改为 document.forms["formName"]。
        又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
    (3)其它

        window.frames("frameName")改为window.frames["frameName"]

3. window.event
    (1)现有问题:
        使用 window.event 无法在 MF 上运行
    (2)解决方法:
        MF 的 event 只能在事件发生的现场使用,此问题暂无法解决。可以这样变通:
        原代码(可在IE中运行):
            <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
            ...
            <script language="javascript">
                function gotoSubmit() {
                    ...
                    alert(window.event);    // use window.event
                    ...
                }
            </script>


        新代码(可在IE和MF中运行):
            <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
            ...
            <script language="javascript">
                function gotoSubmit(evt) {
                    evt = evt ? evt : (window.event ? window.event : null);
                    ...
                    alert(evt);             // use evt
                    ...
                }
            </script>
        此外,如果新代码中第一行不改,与老代码一样的话(即 gotoSubmit 调用没有给参数),则仍然只能在IE中运行,但不会出错。所以,这种方案 tpl 部分仍与老代码兼容。


4. HTML 对象的 id 作为对象名的问题
    (1)现有问题
        在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
    (2)解决方法
        用 getElementById("idName") 代替 idName 作为对象变量使用。


5. 用idName字符串取得对象的问题
    (1)现有问题
        在IE中,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象,在MF 中不能。
    (2)解决方法
        用 getElementById(idName) 代替 eval(idName)。


6. 变量名与某 HTML 对象 id 相同的问题
    (1)现有问题
        在 MF 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE 中不能。
    (2)解决方法
        在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。
        此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。
    (3)其它
        参见 问题4


7. event.x 与 event.y 问题
    (1)现有问题
        在IE 中,event 对象有 x, y 属性,MF中没有。
    (2)解决方法
        在MF中,与event.x 等效的是 event.pageX。但event.pageX IE中没有。
        故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
        event.clientX 与 event.pageX 有微妙的差别(当整个页面有滚动条的时候),不过大多数时候是等效的。


        如果要完全一样,可以稍麻烦些:
        mX = event.x ? event.x : event.pageX;
        然后用 mX 代替 event.x
    (3)其它
        event.layerX 在 IE 与 MF 中都有,具体意义有无差别尚未试验。



8. 关于frame
   (1)现有问题
         在 IE中 可以用window.testFrame取得该frame,mf中不行
   (2)解决方法
         在frame的使用方面mf和ie的最主要的区别是:
如果在frame标签中书写了以下属性:
<frame src="/xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问
ie: window.top.frameId或者window.top.frameName来访问这个window对象
mf: 只能这样window.top.frameName来访问这个window对象


另外,在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
以及/test/js/test_frame/目录下面的测试
----adun 2004.12.09修改


9. 在mf中,自己定义的属性必须getAttribute()取得
10.在mf中没有  parentElement parement.children  而用
               parentNode parentNode.childNodes
   childNodes的下标的含义在IE和MF中不同,MF使用DOM规范,childNodes中会插入空白文本节点。
  一般可以通过node.getElementsByTagName()来回避这个问题。
   当html中节点缺失时,IE和MF对parentNode的解释不同,例如
   <form>
   <table>
        <input/>
   </table>
   </form>
   MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点


  MF中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node)


11.const 问题
  (1)现有问题:
     在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
  (2)解决方法:
     不使用 const ,以 var 代替。


12. body 对象
   MF的body在body标签没有被浏览器完全读入之前就存在,而IE则必须在body完全被读入之后才存在


13. url encoding
在js中如果书写url就直接写&不要写&amp;例如var url = 'xx.jsp?objectName=xx&amp;objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外,因为tpl中符合xml规范,要求&书写为&amp;
一般MF无法识别js中的&amp;



14. nodeName 和 tagName 问题
  (1)现有问题:
     在MF中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值。在 IE 中,nodeName 的使用好象
     有问题(具体情况没有测试,但我的IE已经死了好几次)。
  (2)解决方法:
     使用 tagName,但应检测其是否为空。


15. 元素属性
   IE下 input.type属性为只读,但是MF下可以修改



16. document.getElementsByName() 和 document.all[name] 的问题
  (1)现有问题:
     在 IE 中,getElementsByName()、document.all[name] 均不能用来取得 div 元素(是否还有其它不能取的元素还不知道)。

前面我们讨论了如何在 JavaScript 语言中实现对私有实例成员、公有实例成员、私有静态成员、公有静态成员和静态类的封装。这次我们来讨论一下面向对象程序设计中的另外两个要素:继承与多态。

JavaScript 是一种非常灵活的面向对象程序设计语言,它与传统的强类型的面向对象程序设计语言(如 C++,Java,C# 等)有很大不同,所以要实现如 C++、java、C# 当中的一些特性就需要换一种思考方式来解决。今天主要讨论如何在 JavaScript 脚本中实现数据的封装(encapsulation)。

数据封装说的简单点就是把不希望调用者看见的内容隐藏起来。它是面向对象程序设计的三要素之首,其它两个是继承和多态,关于它们的内容在后面再讨论。

关于数据封装的实现,在 C++、Java、C# 等语言中是通过 public、private、static 等关键字实现的。在 JavaScript 则采用了另外一种截然不同的形式。在讨论如何具体实现某种方式的数据封装前,我们先说几个简单的,大家所熟知却又容易忽略的 JavaScript 的概念。


Run this command:

CMD> gpupdate /force

How to Disable URLWriting for Tomcat

[不指定 2007/09/10 12:51 | by ipaddr ]


使用IIS进行NTLM+NTLM2认证,再使用JspISAPI连接到Tomcat,测试使用时发现,由于JspISAPI访问Tomcat时,Tomcat不知道他是否支持Cookies,所以在所有的URL上面,加上了xxx.jsp;jsessionid=xxxxx,以实现对Session的支持。

但IIS无法识别带“;”的URL,导致IIS提示401打不到页面的错误,所以我们需要关闭Tomcat的URLWriting功能。

在Tomcat的Server.xml的Host里面,增加以下两个设置:
 enableUrlRewriting="false" enableCookies="true"

强制Tomcat不使用UrlWriting。

Ipaddr提示,JspISAPI是用.net 2.0编写的,功能比较简单,如果你不想购买的话,可以反编译它。

How to use PackageThis

[不指定 2007/09/05 10:44 | by ipaddr ]

What's PackageThis

What It Does

Package This is a GUI tool written in C# for creating help files (.chm and .hxs) from the content obtained from the MSDN Library or the TechNet Library via the MSDN Content Service. You select the content you want from the table of contents, build a help file, and use the content offline. You are making personalized ebooks of MSDN or TechNet content. Both help file formats also give full text search and keyword search.

The code illustrates how to use the MSDN Content Service to retrieve documentation from MSDN or TechNet. It also shows how to build .hxs files and .chm files programmatically.

Prerequisites

Package This requires .NET 2.0, the .hxs SDK (MSHelp 2.0), part of the Visual Studio 2005 SDK, and the .chm SDK (You must Install HTML Help Workshop). If you just want to create .chm files, you don't need to download the .hxs components (and vice versa).

How to use

1. 安装.Net 2.0,如需生成CHM文件,需要安装MS HTML Help Workshop

2. 从官方网站 http://www.codeplex.com/packagethis 下载PackageThis

3. 下载后,解压,直接运行PackageThis。

4. 在菜单中选择Library (MSDN, TechNet),选择语言(通常英文的资料是最新最全的)

5. 使用左边的树形菜单,导航到你所需要下载的节点(整个Library很大,而且从中国到美国的访问速度很慢,如果选择比较上层的节点,可能需要很长的时间下载。)

6. 右击需要下载的节点,选择"Select this node and all children", PackageThis开始下载该节点和所有子节点的资料。请等待下载...

7. 下载完成后,点击菜单"File" => "Export to Chm File..." 或 "Export to Hxs File...",打包成CHM或HXS格式。

鱼漂(Ipaddr)提醒:Hxs格式需要专门的软件才可以打开,推荐使用Help Explorer 3.0

Reference

PackageThis: http://www.codeplex.com/packagethis

MSDN Library: http://msdn2.microsoft.com/library

TechNet Library: http://technet.microsoft.com/library

LoadRunner 的 web_set_user 函数

[不指定 2007/09/03 13:59 | by ipaddr ]

不少使用IIS或是windows域的环境中,在访问某个页面时,系统会弹出一个对话框要求用户输入域用户名称和口令,输入正确的与用户名称和口令才能继续。在使用LoadRunner对这种类型的网站进行测试时,录制下来的脚本在回放时通常都会在访问特定页面时给出一个401 Authorized require的错误信息。

其实,在LoadRunner中,有一个专门的函数 web_set_user 可以实现输入windows认证信息。

web_set_user()函数带三个参数,分别是 域用户名、口令和需要登录的服务器名称和端口,第一个参数需要注意的是一定要带上域名,其格式为\\windomainname\username,而最容易混淆的莫过于第三个参数了。特别需要注意的是,第三个参数是“需要认证的服务器名:端口”,假设你要访问的web url 是 http://requireauth/login.asp,则第三个参数应该是“requireauth:80”,有些朋友错误的写成“http://requireauth:80”或是“requireauth/login.asp:80”,都是不正确的。

最后,知其然,知其所以然。web_set_user函数的原理并不复杂,简单的说,就是通过NTLM协议发送了一些数据包给服务器而已。关于NTLM的更详细的内容,提供两份参考文献:

http://www.innovation.ch/personal/ronald/ntlm.html
http://davenport.sourceforge.net/ntlm.html

分页: 29/57 第一页 上页 24 25 26 27 28 29 30 31 32 33 下页 最后页 [ 显示模式: 摘要 | 列表 ]