Javascript在IE和火狐下兼容性集合(16点)

合集下载

兼容firefox和ie的javascript的一些写法

兼容firefox和ie的javascript的一些写法

有很多人遇到这样的问题,干脆把我的收藏共享出来算了:推荐flapjax用用。

相关链接[url]/blog/140924/22646[/url]以下是转载的正文:兼容firefox和ie的javascript的一些写法最近我想让我们的CMS能在firefox中使用,于是以前所写的javascript代码就都需要考虑兼容问题了,无端增加了好多工作量。

下面是兼容firefox和ie时需要注意的一些写法一,事件处理在ie中处理事件直接使用window.event对象即可,但在firefox中,是没有window.event 对象的,函数需要使用事件的时候,需要在事件发生时把事件作为参数传递给函数,不象在ie中,事件对象是全局的,随处都可以访问。

下面这个getEvent()函数可以兼容firefox 和ie,只需要在访问事件对象的函数的开始调用getEvent()即可,不用再把事件作为参数传递。

function myfunc(){var evt=getEvent();var element=evt.srcElement || evt.target;}function getEvent(){if(document.all) return window.event;//如果是iefunc=getEvent.caller;while(func!=null){var arg0=func.arguments[0];if(arg0){if((arg0.constructor==Event || arg0.constructor ==MouseEve nt) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)) {return arg0;} }func=func.caller;}return null;}在firefox和ie中event对象还是有些差别的,比如ie中event.srcElement,在firefox 中就是event.target,具体可参考:[url]/domref/domevent.shtml[/url]二,访问frame或iframe对象在ie中可以通过frame的id或name来访问,但在firefox中只能用frame的name来访问.三,自定义属性在ie中自定义属性可以直接访问,但在firefox中需要使用getAttribute() 比如<td id="name" tel="1234"></td>ie中:alert(name.tel);firefox中:alert(name.getAttribute("tel"));四,innerText和textContentie中的innerText在firefox中对应的是textContent例如if(document.all){document.getElementById('element').innerText = "my text";} else{document.getElementById('element').textContent = "my text";}。

JavaScript-FF和IE兼容性问题总结

JavaScript-FF和IE兼容性问题总结

长久以来JavaScript兼容性一直是Web开发者的一个主要问题。

在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬。

为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性:一、函数和方法差异;二、样式访问和设置;三、DOM方法及对象引用;四、事件处理;五、其他差异的兼容处理。

一、函数和方法差异1. getYear()方法【分析说明】先看一下以下代码:var year= new Date().getYear();document.write(year);在IE中得到的日期是"2010",在Firefox中看到的日期是"110",主要是因为在Firefox 里面getYear 返回的是"当前年份-1900" 的值。

【兼容处理】加上对年份的判断,如:var year= new Date().getYear();year = (year<1900?(1900+year):year);document.write(year);也可以通过getFullYear getUTCFullYear 去调用:var year = new Date().getFullYear();document.write(year);2. eval()函数【分析说明】在IE中,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象。

【兼容处理】统一用getElementById("idName")来取得id为idName的HTML对象。

3. const声明【分析说明】在IE 中不能使用const 关键字。

JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结

JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结

JavaScript在IE和Firefox(⽕狐)的不兼容问题解决⽅法⼩结复制代码代码如下:if (window.HTMLElement) {HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {var r=this.ownerDocument.createRange();r.setStartBefore(this);var df=r.createContextualFragment(sHTML);this.parentNode.replaceChild(df,this);return sHTML;});HTMLElement.prototype.__defineGetter__("outerHTML",function() {var attr;var attrs=this.attributes;var str="<"+this.tagName.toLowerCase();for (var i=0;i<attrs.length;i++) {attr=attrs[i];if(attr.specified)str+=" "++'="'+attr.value+'"';}if(!this.canHaveChildren)return str+">";return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";});HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {switch(this.tagName.toLowerCase()) {case "area":case "base":case "basefont":case "col":case "frame":case "hr":case "img":case "br":case "input":case "isindex":case "link":case "meta":case "param":return false;}return true;});}说明:IE下,可以使⽤()或[]获取集合类对象;Firefox下,只能使⽤[]获取集合类对象.解决⽅法:统⼀使⽤[]获取集合类对象.说明:IE下,可以使⽤获取常规属性的⽅法来获取⾃定义属性,也可以使⽤getAttribute()获取⾃定义属性;Firefox下,只能使⽤getAttribute()获取⾃定义属性.解决⽅法:统⼀通过getAttribute()获取⾃定义属性.说明:IE下,,可以使⽤eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使⽤getElementById("idName")来取得id为idName的HTML对象.解决⽅法:统⼀⽤getElementById("idName")来取得id为idName的HTML对象.说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使⽤;Firefox下则不能.Firefox下,可以使⽤与HTML对象ID 相同的变量名;IE下则不能。

JavaScript 浏览器兼容性总结及常用浏览器兼容性分析

JavaScript 浏览器兼容性总结及常用浏览器兼容性分析

小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧!1. children与childNodesIE提供的children、childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会。

比如:&lt;div id="dd"&gt;&lt;div&gt;yizhu2000&lt;/div&gt;&lt;/div&gt;d为dd的div在IE下用childNodes查看,其子节点数为1,而ff下为三,我们可以从firefox的dom查看器里面看到他的childNodes为["\n ", div, "\n"]。

要在firefox下模拟children的属性我们可以这样做:if (typeof(HTMLElement) != "undefined" &amp;&amp; !window.opera) {HTMLElement.prototype.__defineGetter__("children", function() {for (var a = [], j = 0, n, i = 0; i &lt; this.childNodes.length; i++) {n = this.childNodes[i];if (n.nodeType == 1) {a[j++] = n;if () {if (!a[])a[] = [];a[][a[].length] = n;}if (n.id)a[n.id] = n;}}return a;});}2. firefox和ie的事件window.event只能在IE下使用,而不能用在Firefox下,这是因为Firefox的event只能在事件发生的现场使用。

火狐浏览器兼容整理方案

火狐浏览器兼容整理方案

《firefox与IE 浏览器兼容整理方案》keywords: javascript;css;firefox;ie;区别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下则不能。

JavaScriptFF与IE兼容性问题总结

JavaScriptFF与IE兼容性问题总结

JavaScriptFF与IE兼容性问题总结.doc JavaScript与IE兼容性问题总结引言随着Web技术的快速发展,JavaScript已成为前端开发中不可或缺的一部分。

然而,由于历史原因,Internet Explorer(IE)浏览器在JavaScript的支持上存在一些限制和差异,这给开发者带来了一定的挑战。

本文将总结JavaScript在IE浏览器中的兼容性问题,并提供一些解决方案。

浏览器版本与JavaScript支持IE浏览器经历了多个版本的迭代,每个版本对JavaScript的支持程度都有所不同。

从IE6到IE11,JavaScript的兼容性问题主要集中在以下几个方面:文档对象模型(DOM):不同版本的IE对DOM的支持存在差异。

事件模型:IE使用自己的事件模型,与W3C标准存在差异。

CSS样式:IE对CSS的支持不完全符合W3C标准。

JavaScript ES5/ES6特性:IE对ES5和ES6的新特性支持不完全。

常见的兼容性问题1. 条件注释IE浏览器特有的条件注释是解决兼容性问题的一种方式,但它们会使HTML代码变得冗长。

!--[if lte IE 8]script src=ie8.js/script![endif]--2. 事件处理IE的事件模型与W3C标准不同,这可能导致事件处理上的差异。

attachEvent vs addEventListener:IE使用attachEvent,而现代浏览器使用addEventListener。

事件对象:IE的事件对象与W3C标准不同,例如event.srcElement vs event.target。

3. DOM操作IE在DOM操作上有一些特有的方法和属性,例如document.all和patMode。

4. CSS样式IE对CSS的支持不完全符合W3C标准,例如float属性在IE中表现为layout。

5. JavaScript新特性IE对ES5和ES6的新特性支持不完全,例如let、const、Promise、fetch等。

javascript代码在浏览器IE和Firefox兼容性的16个问题

javascript代码在浏览器IE和Firefox兼容性的16个问题javascript代码在浏览器IE和Firefox兼容性的16个问题1. document.form.item 问题(1)现有问题:现有代码中存在许多document.formName.item("itemName") 这样的语句,不能在 MF 下运行(2)解决方法:改用 document.formName.elements["elementName"](3)其它参见 22. 集合类对象问题(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中运行):<="" name="someButton" p="" type="button" value="提交"/>onclick="javascript:gotoSubmit()"/>...新代码(可在IE和MF中运行):<="" name="someButton" p="" type="button" value="提交"/>onclick="javascript:gotoSubmit(event)"/>...此外,如果新代码中第一行不改,与老代码一样的话(即gotoSubmit 调用没有给参数),则仍然只能在IE 中运行,但不会出错。

IE和火狐网页制作不兼容问题

解决css和js针对不同浏览器兼容的问题Firefox浏览器良好支持W3C标准,是目前对CSS支持最好的浏览器,而ie是出现的比较早,在w3c支持方面做的一直不是很好,所以两种浏览器在很多方面不尽相同。

下面总结一下这两种浏览器的兼容问题:1.集合类对象问题说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.解决方法:统一使用[]获取集合类对象.2.HTML对象获取问题FireFox:document.getElementById("idName");ie:document.idname或者document.getElementById("idName").解决办法:统一使用document.getElementById("idName");3.const问题说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.解决方法:统一使用var关键字来定义常量.4.window.event问题说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox 的event只能在事件发生的现场使用. Firefox必须从源处加入event作参数传递。

Ie忽略该参数,用window.event来读取该event。

解决方法:以下为引用的内容:IE&Firefox:Submitted(event)"/> …<script language="javascript">function Submitted(evt) {evt=evt?evt:(window.event?window.event:null);}</script>5.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.6.event.srcElement问题说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 请同时注意event的兼容性问题。

ie与firefox兼容

一、document.formName.item(“itemName”) 问题问题说明:IE下,可以使用 document.formName.item(“itemName”) 或document.formName.elements [&quot;elementName&quot;];Firefox 下,只能使用document.formName.elements[&quot;elemen一、document.formName.item(“itemName”) 问题问题说明:IE下,可以使用 document.formName.item(“itemName”) 或document.formName.elements ["elementName"];Firefox下,只能使用document.formName.elements["elementName"]。

解决方法:统一使用document.formName.elements["elementName"]。

二、集合类对象问题问题说明:IE下,可以使用 () 或 [] 获取集合类对象;Firefox下,只能使用 [ ]获取集合类对象。

解决方法:统一使用 [] 获取集合类对象。

问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute() 获取自定义属性;Firefox下,只能使用 getAttribute() 获取自定义属性。

解决方法:统一通过 getAttribute() 获取自定义属性。

四、eval(“idName”)问题问题说明:IE下,可以使用 eval(“idName”) 或 getElementById(“idName”) 来取得 id 为idName 的HTML对象;Firefox下,只能使用 getElementById(“idName”) 来取得 id 为idName 的HTML对象。

ie和火狐兼容问题(转载)

ie和火狐兼容问题(转载)1. document.form.item 问题(1)现有问题:现有代码中存在许多document.formName.item("itemName") 这样的语句,不能在Firefox(火狐)下运行(2)解决方法:改用 document.formName.elements["elementName"]2. 集合类对象问题(1)现有问题:现有代码中许多集合类对象取用时使用 (),IE 能接受,Firefox(火狐)不能。

(2)解决方法:改用[] 作为下标运算。

如:document.forms("formName") 改为 document.forms["formName"]。

又如:document.getElementsByName("inputName")(1) 改为document.getElementsByName("inputName")[1]3. window.event(1)现有问题:使用 window.event 无法在火狐浏览器上运行(2)解决方法:火狐的 event 只能在事件发生的现场使用,此问题暂无法解决。

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

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Javascript 在IE和火狐下的部分兼容性集合:(16点)注:IE : Internet Explorer,MF :Mozzila Firefox1. document.form.item 问题(1)现有问题:现有代码中存在许多document.formName.item("itemName") 这样的语句,不能在MF 下运行(2)解决方法:改用document.formName.elements["elementName"](3)其它参见22. 集合类对象问题(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 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)其它参见问题47. 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)其它yerX 在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.childNodeschildNodes的下标的含义在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 constV ar = 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 元素(是否还有其它不能取的元素还不知道)。

后注:本文由TANG整理发布,参考网站:。

相关文档
最新文档