查网站备案信息,长沙市网站推广公司,青岛有没有做网站的,厦门市建设工程造价协会官方网站要写出在各大主流浏览器上都兼容的JS代码#xff0c;就要关注他们的区别#xff0c;下是IE和FF综合考虑的通用DOM#xff01; 1.document.formName.item(itemName) 问题说明:IE下,可以使用document.formName.item(itemName)或document.formName.ele… 要写出在各大主流浏览器上都兼容的JS代码就要关注他们的区别下是IE和FF综合考虑的通用DOM 1.document.formName.item(itemName) 问题说明:IE下,可以使用document.formName.item(itemName)或document.formName.elements[elementName];Firefox下,只能使用document.formName.elements[elementName].解决方法:统一使用document.formName.elements[elementName].2.集合类对象问题说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.解决方法:统一使用[]获取集合类对象.3.自定义属性问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.解决方法:统一通过getAttribute()获取自定义属性.4.eval(idName)问题说明:IE下,,可以使用eval(idName)或getElementById(idName)来取得id为idName的HTML对象;Firefox下只能使用getElementById(idName)来取得id为idName的HTML对象.解决方法:统一用getElementById(idName)来取得id为idName的HTML对象. 5.变量名与某HTML对象ID相同的问题说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。解决方法:使用document.getElementById(idName)代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.6.const问题说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.解决方法:统一使用var关键字来定义常量.7.input.type属性问题说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.8.window.event问题说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.解决方法:IE:input nameButton8_1 typebutton valueIE οnclickjavascript:gotoSubmit8_1()/...script languagejavascriptfunction gotoSubmit8_1() {...alert(window.event); //use window.event...}/scriptIEFirefox:input nameButton8_2 typebutton valueIE οnclickjavascript:gotoSubmit8_2(event)/...script languagejavascriptfunction gotoSubmit8_2(evt) {...evtevt?evt:(window.event?window.event:null);alert(evt); //use evt...}/script9.event.x与event.y问题说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.解决方法:使用mX(mX event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.10.event.srcElement问题说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.解决方法:使用obj(obj event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 11.window.location.href问题说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.解决方法:使用window.location来代替window.location.href.12.模态和非模态窗口问题说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如var parWin window.opener; parWin.document.getElementById(Aqing).value Aqing;13.frame问题以下面的frame为例frame srcxxx.html idframeId nameframeName /(1)访问frame对象:IE:使用window.frameId或者window.frameName来访问这个frame对象.Firefox:只能使用window.frameName来访问这个frame对象.另外在IE和Firefox中都可以使用window.document.getElementById(frameId)来访问这个frame对象.(2)切换frame内容:在IE和Firefox中都可以使用window.document.getElementById(testFrame).src xxx.html或window.frameName.location xxx.html来切换frame的内容.如果需要将frame中的参数传回父窗口可以在frme中使用parent来访问父窗口。例如parent.document.form1.filename.valueAqing;14.body问题Firefox的body在body标签没有被浏览器完全读入之前就存在而IE的body则必须在body标签被浏览器完全读入之后才存在.例如Firefoxbodyscript typetext/javascriptdocument.body.onclick function(evt){evt evt || window.event;alert(evt);}/script/bodyIEFirefoxbody/bodyscript typetext/javascriptdocument.body.onclick function(evt){evt evt || window.event;alert(evt);} /script15. 事件委托方法IEdocument.body.onload inject; //Function inject()在这之前已被实现Firefoxdocument.body.onload inject();有人说标准是document.body.οnlοadnew Function(inject());16. firefox与IE(parentElement)的父元素的区别IEobj.parentElementfirefoxobj.parentNode解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.17.cursor:hand VS cursor:pointerfirefox不支持hand但ie支持pointer解决方法: 统一使用pointer18.innerText在IE中能正常工作但是innerText在FireFox中却不行.解决方法:if(navigator.appName.indexOf(Explorer) -1){ document.getElementById(element).innerText my text;} else{ document.getElementById(element).textContent my text;}19. FireFox中类似 obj.style.height imgObj.height 的语句无效解决方法obj.style.height imgObj.height px;20. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同在ie中不允许对table和tr的innerHTML赋值使用js增加一个tr时使用appendChile方法也不管用。解决方法//向table追加一个空行var row otable.insertRow(-1);var cell document.createElement(td);cell.innerHTML ;cell.className XXXX;row.appendChild(cell);21. padding 问题padding 5px 4px 3px 1px FireFox无法解释简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;22. 消除ul、ol等列表的缩进时样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效padding属性对FireFox有效23. CSS透明IEfilter:progid:DXImageTransform.Microsoft.Alpha(style0,opacity60)。FFopacity:0.6。24. CSS圆角IE不支持圆角。FF -moz-border-radius:4px或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。25. CSS双线凹凸边框IEborder:2px outset;。FF -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080; 以下以 IE 代替 Internet Explorer以 MF或FF代替 Mozzila Firefox1innerTextIE支持FIREFOX不支持解决办法用innerHTML,2种浏览器都识别innerHTML 2document.createElementdocument.appendChild在往表里插入行时FIREFOX支持IE不支持解决办法把行插入到TBODY中不要直接插入到表 3setAttribute(style,color:red;)FIREFOX支持(除了IE现在所有浏览器都支持)IE不支持解决办法不用setAttribute(style,color:red)而用object.style.cssText color:red;(这写法也有例外)最好的办法是上面种方法都用上万无一失 ^_^4:classsetAttribute(class,styleClass)FIREFOX支持IE不支持(指定属性名为CLASSIE不会设置元素的CLASS属性相反只使用SETATTRIBUTE时IE自动识别CLASSNAME属性)解决办法setAttribute(class,styleClass)setAttribute(className,styleClass)2种都用上注IE和FF都支持object.className 5:用setAttribute设置事件var obj document.getElementById(objId);obj.setAttribute(onclick,funcitonname(););FIREFOX支持IE不支持解决办法IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数如下var obj document.getElementById(objId);obj.οnclickfunction(){fucntionname();};这种方法所有浏览器都支持 6建立单选钮IE以外的浏览器var rdo document.createElement(input);rdo.setAttribute(type,radio);rdo.setAttribute(name,radiobtn);rdo.setAttribute(value,checked); IE:var rdo document.createElement(input typeradio nameradiobtn valuechecked);解决办法这一点区别和前面的都不一样。这次完全不同所以找不到共同的办法来解决那么只有IF-ELSE了万幸的是IE可以识别出document的uniqueID属性别的浏览器都不可以识别出这一属性。问题解决。 0共同的一些技巧在动态建立INPUT型输入元素时一般是先加入在设置TYPE。这就有可能出错 好习惯var btn document.createElement(input);btn.setAttribut(type,button);document.getElementById(formId).appendChild(btn); 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)其它 3. window.event(1)现有问题使用 window.event 无法在 MF 上运行(2)解决方法MF 的 event 只能在事件发生的现场使用此问题暂无法解决。可以这样变通原代码(可在IE中运行)input typebutton namesomeButton value提交 οnclickjava script:gotoSubmit()/...script languagejavascriptfunction gotoSubmit() {...alert(window.event); // use window.event...}/script 新代码(可在IE和MF中运行)input typebutton namesomeButton value提交 οnclickjava script:gotoSubmit(event)/...script languagejavascriptfunction 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取得该framemf中不行(2)解决方法在frame的使用方面mf和ie的最主要的区别是如果在frame标签中书写了以下属性frame srcxx.htm idframeId nameframeName /那么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/目录下面的测试 9. 在mf中自己定义的属性必须getAttribute()取得10.在mf中没有 parentElement parement.children 而用parentNode parentNode.childNodeschildNodes的下标的含义在IE和MF中不同MF使用DOM规范childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。当html中节点缺失时IE和MF对parentNode的解释不同例如formtableinput//table/formMF中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就直接写不要写例如var url xx.jsp?objectNamexxobjectEventxxx;frm.action url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器一般会服务器报错参数没有找到当然如果是在tpl中例外因为tpl中符合xml规范要求书写为一般MF无法识别js中的 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 元素是否还有其它不能取的元素还不知道。 1. 向表中追加行这是IE和Firefox,Safari,Opera都支持的代码var cell documentcreateElement(td).appendChild(document.createTextNode(foo)); var row document.createElement(tr).appendChild(cell); document.getElementById(MyTableBoyd).appendChild(row); 或者在TR的父节点添加TBODY。注在IE中利用DOM动态添加表格的行时在TR的上一层必须添加TBODY否则动态添加之后无法显示出来 2. 通过JAVASCRIPT设置元素的样式var spanElement document.getElementById(myspan); //spanElement.setAttribute(style,font-weight:bold;color:red); //IE之外的浏览器spanElement.style.cssTextfont-weight:bold;color:red; //IE的方法cssText不是标准属性,但得到IE支持 3. IE和FF在添加Option兼容操作这里直接贴出本人的代码注FF支持直接将Option列表以innerHTML形式嵌入到select节点但IE不支持function removeAllOptions(select_id){ var comdocument.getElementById(select_id); var lencom.options.length; for(var i0;ilen;i){ com.remove(0); }}function addOption(e_select,value,text){ var oOption document.createElement(option); e_select.options.add(oOption); if(text!null){ var text_nodedocument.createTextNode(text); oOption.appendChild(text_node); } if(value!null){ oOption.value value; }} 4. 创建输入元素(通用代码)var button document.createElement(input); button.setAttribute(type,button); document.getElementById(form).appendChild(button); 5. 向输入元素增加事件处理程序(通用代码)var element document.getElementById(ee); element.οnclickfunction(){todo();}; 6. 创建单选按钮var ration document.createElement(input typeradio nameradionsss valuechecked”);//ie //非ie创建方法vat radion document.createElement(input); radion .setAttribute(type,radio); radion.setAttribute(name,radionsss); radion.setAttribute(value,checked); 转载于:https://www.cnblogs.com/CharmingDang/archive/2008/10/18/9663753.html
