兼容IE与FF的Javascript程序收集
来源：互联网 发布：centos less 退出 编辑：程序博客网 时间：2024/05/17 03:17
一.Event
文本框中回车
if(evt.keyCode==13 )
{
if (document.all)
document.getElementById("imgSearch").click();
else
{
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
document.getElementById("imgSearch").dispatchEvent(evt);
}
return false;
}
<input id="txtFind" name="txtFind" type="text" onfocus="findClear(this)" onkeydown="javascript:return okd(event);"
value="请输入想查询的关键字" style="border:1px solid;text-align:left;padding-top:1px;color:#888;height:15px;width:300px;" /><img src="/image/head/an_search02.gif" id="imgSearch" width="90" height="24" onclick="getSearchParm()" alt="" style=" cursor:pointer;"/>
二.
1.调用appendChild方法增加input对象，设置type属性的位置
1
<html>
2 <head>
3 <title>test</title>
4
<script language="javascript">
5
function test(){
6
var tbodyElement=document.getElementById("tbody1");
7 var trElement=document.createElement("tr");
8 var idTDElement=document.createElement("td");
9
10 idTDElement.innerHTML=1;
11 var nameTDElement=document.createElement("td");
12
13 var inputElement=document.createElement("input");
14 nameTDElement.appendChild(inputElement);
15 inputElement.type="button";
16 //在IE中，这句话将会抛出异常，但在firefox能正常运行，如果type为text或者不设置type属性，也都能正常运行
17 inputElement.value="Invoke";
18 /**//*
19 修改成下面的语句就能正常运行：
20 var inputElement=document.createElement("input");
21 inputElement.type="button";
22 nameTDElement.appendChild(inputElement);
23
*/
24
25 tbodyElement.appendChild(trElement);
26 trElement.appendChild(idTDElement);
27 trElement.appendChild(nameTDElement);
28 }
29
</script>
30 </head>
31 <body>
32 <input type="button" value="insert" onclick='test()'>
33 <table cellpadding="0" cellspacing="0" border="1">
34 <tbody id='tbody1'>
35 <tr>
36 <td width="50">ID</td>
37 <td width="200">name</td>
38 </tr>
39 </tbody>
40 </table>
41 </body>
42 </html>
2.appendChild一个radio对象，设置该对象的name属性
1 var nameTDElement=document.createElement("td");
2 var radioElement=document.createElement("input");
3 radioElement.type="radio";
4 nameTDElement.appendChild(inputElement);
5 radioElement.name="testRadioName"; //这句话在firefox是起作用的，但在IE下是不起作用的
6 /**//*解决的办法是
7 var radioElement=document.createElement("<input name='testRadioName'>");
8 radioElement.type="radio";
9 nameTDElement.appendChild(inputElement);
10 */
3.对select控件增加和删除Option
1 <html>
2 <head>
3 <title>test</title>
4 <script language="javascript">
5 function deleteRow(){
6 var selectElement=document.getElementById("select1");
7 selectElement.options.remove(1); //IE:OK Firefox:Failure
8 selectElement.remove(1); //IE:OK Firefox:OK
9 }
10 function insertRow(){
11 var selectElement=document.getElementById("select1");
12 var option=new Option("eeee",5);
13 selectElement.add(option); //IE:OK Firefox:Failure
14 selectElement.options.add(option);//IE:OK Firefox:OK
15 }
16 </script>
17 </head>
18 <body>
19 <input type="button" value="Delete" onclick='deleteRow()'>
20 <input type="button" value="Insert" onclick='insertRow()'>
21 <select id="select1">
22 <option value="1">aaa</option>
23 <option value="2">bbb</option>
24 <option value="3">ccc</option>
25 <option value="4">ddd</option>
26 </select>
27 </body>
28 </html>
三.treeview
---------------ajaxTreeView.js------------------------------
if(typeof ajaxTreeNode =="undefined"){
//ID,值，优先级,父ID
function ajaxTreeNode(keyId,keyValue,pIdx,keyPri,isTop){
this.keyId=keyId ;
this.keyValue=keyValue ;
this.keyPri=keyPri ;
this.pIdx=pIdx;
this.IsTop=isTop ;
this.pLevel=0;
this.pNode=null ;
this.pState=1;//当前状态 0：展开，1：收起---------------------默认值为1
this.subs=new Array ();
}
}
if(typeof ajaxTreeView=="undefined"){
function ajaxTreeView(ownerId,dirId,sortOrder,dirType,selectedNodeId){
this.Owner=ownerId ;
this.RootDirId=dirId ;
this.SortDirection=sortOrder ;
this.DirType=dirType ;
this.SelectedId=selectedNodeId;
this.RootTreeNode=new Array ();
this.DirData="";
this.Container=false ;
this.FetchDataOver=false ;
this.RenderOk=false ;
this.tmp=new Array ();
var cTh=this;
this.createHttp=function () {
var http=false ;
if(typeof ActiveXObject !="undefined"){
try
{
http=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
http=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E)
{
http=false ;
}
}
} else if(XMLHttpRequest ){
try
{
http=new XMLHttpRequest();
}
catch(e)
{
http=false ;
}
}
return http ;
}
this.init=function(){
var xmlHttp=cTh.createHttp();
if(!xmlHttp )
return ;
var querys="DirType="+cTh.dirType +"&DirId="+cTh.rootId +"&SelID="+cTh.selectedNodeId ;
var url="DirGet.aspx?"+querys ;
xmlHttp.open("GET",url ,true );
xmlHttp.onreadystatechange=function (){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
cTh.DirData =xmlHttp.responseText;
cTh.FetchDataOver =true ;
cTh.render();
}
}
}
xmlHttp.send(null );
}
//排序
this.ascSortCallback=function(x,y){
if(x.keyPri>y.keyPri)
return 1;
else if(x.keyPri= y.keyPri)
return 0;
else
return -1;
}
this.descSortCallback=function(x,y){
if(x.keyPri>y.keyPri)
return -1;
else if(x.keyPri= y.keyPri)
return 0;
else
return 1;
}
this.addTreeNode=function(treeNode){
var find=false ;
for(var i=0;i<cTh.tmp.length ;i++){
if(cTh.tmp[i].keyId==treeNode.keyId){
find =true ;
break;
}
}
if(treeNode.pIdx==cTh.RootDirId){
var b=false ;
for(var i=0;i<cTh.RootTreeNode.length ;i++){
if(cTh.RootTreeNode[i].keyId==treeNode.keyId){
b=true;
break;
}
}
if(!b){
cTh.RootTreeNode.push(treeNode );
}
}
if(!find){
cTh.tmp.push(treeNode);
}
}
this.getTreeNode=function(treeNode,idx){
//根据ID查找当前ID。
var cn;
if(treeNode.keyId==idx)
cn= treeNode ;
else
for(var i=0;i<treeNode.subs.length;i++){
cn= cTh.getTreeNode(treeNode.subs[i],idx);
if(cn)
break;
}
return cn ;
}
this.close=function(treeNode){
treeNode.pState=1;
for(var i=0;i<treeNode.subs.length;i++){
cTh.close(treeNode.subs[i]);
}
}
this.expand=function(treeNode){
treeNode.pState=0;
var cxp=treeNode.pNode;
while(cxp !=null){
cxp.pState=0;
cxp =cxp.pNode;
}
}
this.render=function(){
if(cTh.Container ==false || cTh.FetchDataOver ==false ){
return ;
}
if(cTh.RenderOk ) return ;
cTh.RenderOk =true ;
var rows=cTh.DirData.split(";");
var i=rows.length;
for(var j=0;j<i;j++){
var dir=rows[j].split(",");
var cd=new ajaxTreeNode(dir[0], dir[1],dir[2],dir[3],dir[4]);
cTh.addTreeNode(cd);
}
if(cTh.SortDirection =="asc"){
cTh.RootTreeNode.sort(cTh.ascSortCallback );
} else {
cTh.RootTreeNode.sort(cTh.descSortCallback );
}
var selectedNode;
for(var i=0;i<cTh.RootTreeNode.length;i++){
cTh.createTree(cTh.RootTreeNode[i]);
if(!selectedNode ){
selectedNode =cTh.getTreeNode(cTh.RootTreeNode[i],cTh.SelectedId);
}
}
if(selectedNode ){
cTh.expand(selectedNode );
alert("FIND");
}
for(var i=0;i<cTh.RootTreeNode.length;i++){
cTh.clientShow(cTh.RootTreeNode[i]);
}
}
this.getSubs=function(treeNode){
var subs=new Array ();
for(var i=0;i<cTh.tmp.length;i ++){
if(cTh.tmp[i].pIdx==treeNode.keyId){
subs.push(cTh.tmp[i]);
}
}
if(subs.length >=2){
if(cTh.SortDirection =="asc"){
subs.sort(cTh.ascSortCallback);
} else {
subs.sort(cTh.descSortCallback );
}
}
return subs ;
}
this.createTree=function(treeNode){
var subs=cTh.getSubs(treeNode);
for(var i=0;i<subs.length;i++){
subs[i].pNode=treeNode ;
subs[i].pLevel=treeNode.pLevel+1;
treeNode.subs.push(subs[i]);
cTh.createTree(subs[i]);
}
}
this.clientShow=function (treeNode){
var dv=document.createElement("div");
dv.setAttribute("class","v"+treeNode.pLevel);
dv.setAttribute("className","v"+treeNode.pLevel);
if(treeNode.subs.length>0)
{
if(window.attachEvent){
//IE
var btn=document.createElement("img");
btn.setAttribute("idx",treeNode.keyId);
if(treeNode.pState==0){
btn.setAttribute("src","collaps.gif");
} else {
btn.setAttribute("src","expand.gif");
}
btn.attachEvent("onclick",cTh.onClick );
dv.appendChild(btn);
} else {
var btn=document.createElement("input");
btn.setAttribute("idx",treeNode.keyId);
btn.setAttribute("type","button");
if(treeNode.pState==0){
btn.setAttribute("value","-");
} else {
btn.setAttribute("value","+");
}
btn.addEventListener("click",cTh.onClick,false);
dv.appendChild(btn);
}
}
{
var ahref=document.createElement("a");
if(treeNode.IsTop==0){
ahref.setAttribute("href","/kb/top1_i"+treeNode.keyId+".htm");
} else {
ahref.setAttribute("href","/kb/i"+treeNode.keyId+".htm");
}
ahref.setAttribute("title",treeNode.keyValue);
ahref.appendChild(document.createTextNode(treeNode.keyValue));
dv.appendChild(ahref );
}
dv.appendChild(document.createTextNode(treeNode.keyPri));
document.getElementById(cTh.Owner).appendChild(dv);
if(treeNode.pState==0){
//----------------展开
for(var i=0;i<treeNode.subs.length;i++){
cTh.clientShow(treeNode.subs[i]);
}
}
}
this.onClick=function(evt){
var dirId;
if(window.event){
dirId=window.event.srcElement["idx"];
} else {
dirId=evt.target.attributes[1].nodeValue;
}
if(!dirId )
return ;
for(var i=0;i<cTh.RootTreeNode.length ;i++){
var ct=cTh.getTreeNode(cTh.RootTreeNode[i],dirId );
if(ct){
break;
}
}
if(ct.pState==1){
cTh.expand(ct);
} else {
cTh.close(ct );
}
var lc=document.getElementById(cTh.Owner).childNodes.length ;
for(var i=lc -1;i>=0;i--){
document.getElementById(cTh.Owner).removeChild(document.getElementById(cTh.Owner).childNodes[i]);
}
for(var i=0;i<cTh.RootTreeNode.length;i++){
cTh.clientShow(cTh.RootTreeNode[i]);
}
}
this.onContainerLoad=function(){
cTh.Container=true ;
cTh.render();
}
}
}
---------------------------------------演示代码 ajaxTree3.htm-----------------------
<!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>
<title>无标题页</title>
<style type="text/css">
.v0{
padding:0;
}
.v1{
padding-left:20px;
}
.v2{
padding-left:40px;
}
.v3{
padding-left:60px;
}
.v4{
padding-left:80px;
}
</style>
</head>
<body>
<div>
<script language="javascript" type="text/javascript" >
var dv=new ajaxTreeView("txt",0,"desc","KB",22);
dv.init();
</script>
<div id="txt"></div>
<script language="javascript" type="text/javascript">
dv.onContainerLoad();
dv.render();
</script>
</div>
</body>
</html>
---------------------------------------服务器端配置--------------
public class DirectoryHttpHandle:IHttpHandler
{
public DirectoryHttpHandle()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
#region IHttpHandler 成员
public bool IsReusable
{
get { return true; }
}
public void ProcessRequest(HttpContext context)
{
string dirId = context.Request.QueryString["DirID"];
string dirType = context.Request.QueryString["DirType"];
context.Response.Clear();
/* var d1=new directoryInfo(1,"司法考试",0,1,1);
var d10=new directoryInfo(2,"刑法",1,1,2);
var d201=new directoryInfo(21,"x1",2,1,3);
var d202=new directoryInfo(22,"x2",2,2,3);
var c01=new directoryInfo(220,"xc1",22,1,4);
var c02=new directoryInfo(221,"xc2",22,2,4);
var c03=new directoryInfo(222,"xc3",22,3,4);
var d203=new directoryInfo(23,"x3",2,3,3);
var d11=new directoryInfo(3,"民法",1,2,2);
var d301=new directoryInfo(31,"m1",3,1,3);
var d302=new directoryInfo(32,"m2",3,2,3);
var d303=new directoryInfo(33,"m3",3,3,3);
var d12=new directoryInfo(4,"商法",1,3,2);
var d401=new directoryInfo(41,"s1",4,1,3);
var d402=new directoryInfo(42,"s2",4,2,3);
var d403=new directoryInfo(43,"s3",4,3,3);*/
DirectoryInfo[] dris = new DirectoryInfo[]{
new DirectoryInfo(1, "司法考试",0,1,1),
new DirectoryInfo(2,"刑法",1,2),
new DirectoryInfo(21,"刑法 & 第一章",2,1),
new DirectoryInfo(22,"刑法第二章",2,2),
new DirectoryInfo(221,"第二章第1节",22,1),
new DirectoryInfo(222,"第二章第2节",22,2),
new DirectoryInfo(223,"第二章第3节",22,3),
new DirectoryInfo(23,"刑法第三章",2,3),
new DirectoryInfo(3,"明法",1,3),
new DirectoryInfo(31,"明法第一章",3,1),
new DirectoryInfo(32,"明法第二章",3,2),
new DirectoryInfo(33,"明法第三章",3,3),
new DirectoryInfo(4,"商法",1,4),
new DirectoryInfo(41,"商法第一章",4,1),
new DirectoryInfo(42,"商法第二章",4,2),
new DirectoryInfo(43,"商法第三章",4,3),
new DirectoryInfo(100, "律师考试",0,2,1),
new DirectoryInfo(10002,"大律师法",100,1),
new DirectoryInfo(100001,"律师法第一章",10002,1),
new DirectoryInfo(100002,"律师法第二章",10002,2),
new DirectoryInfo(10003,"中级律师",100,1)
};
foreach (DirectoryInfo dir in dris)
{
context.Response.Write(dir.DirId);
context.Response.Write(",");
context.Response.Write(dir.DirName.Trim(new char[] { ',', ';' }));
context.Response.Write(",");
context.Response.Write(dir.ParentId);
context.Response.Write(",");
context.Response.Write(dir.OrderId);
context.Response.Write(",");
context.Response.Write(dir.IsTop);
context.Response.Write(";");
}
context.Response.Flush();
context.Response.End();
}
#endregion
}
public class DirectoryInfo
{
public int DirId;
public string DirName;
public int Level;
public int ParentId;
public int OrderId;
public int IsTop;
public DirectoryInfo(int dirId, string dirName, int pId, int order,int isTop)
{
DirId = dirId;
DirName = dirName;
Level = 0;
ParentId = pId;
OrderId = order;
IsTop = isTop;
}
public DirectoryInfo(int dirId, string dirName, int pId, int order)
: this(dirId, dirName, pId, order, 0)
{
}
}
--------------------------------Web.config
<add verb="*" path="DirGet.aspx" type="DirectoryHttpHandle"/>
----------------------------------------------
收集一些网上搜到的
- 兼容IE与FF的Javascript程序收集
- 兼容IE与FF的Javascript加载Flash
- JAVASCRIPT IE 与 FF 中兼容笔记
- IE与FF的innerHTML兼容
- IE与FF的兼容性收集(一)
- javascript兼容ＦＦ和ＩＥ
- javascript 兼容写法(FF&IE)
- IE与FF中兼容
- IE 与 FF JS兼容
- IE和FF都兼容的加入收藏的javascript代码
- 关于JavaScript兼容FF和IE的方法(IE、FF下的srcElement属性)
- Javascript兼容IE&FF的复制到剪贴板
- 简单的JAVASCRIPT画图函数(兼容ie/ff)
- 【Javascript】二、IE/FF的JS兼容写法
- 一段兼容IE和FF的Ajax程序
- 兼容FF IE的Event
- IE和FF的兼容
- 完美兼容FF与IE的列表写法
- 面向对象程序设计的4个主要特点
- STart
- 24个常用方法有效优化ASP.NET的性能(一)
- 弹出输入框
- 2008年上半年软考系统分析师考试试题分析
- 兼容IE与FF的Javascript程序收集
- vs2008中文版 下载
- 24个常用方法有效优化ASP.NET的性能（二）
- 用JavaSctipt调用WebService
- CSOCKET 中的错误值含义
- 有关交通工具的种种搞笑事件
- js日期格式化
- 感觉比较好的hips＋av配置方案
- JavaScript 使用物件導向技術來建立進階 Web 應用程式
