IE and Firefox's Javascript Compatibility Summary

2010-05-11  来源:本站原创  分类:Web  人气:412 

First, differences in functions and methods

1. GetYear () method

【Note】 a look of the following code:

var year = new Date (). getYear (); document.write (year);
In IE to get a date "2010" in Firefox to see the date is "110", mainly because of Firefox which getYear returns the "current year -1900" value.

【Treatment】 compatible

Combined with years of judging, such as:

var year = new Date (). getYear (); year = (year <1900? (1900 + year): year); document.write (year);
You can also getFullYear getUTCFullYear to call:

var year = new Date (). getFullYear (); document.write (year);

2.window.event problem description: window.event can only run in IE, but can not run in Firefox, because Firefox's event can only be used in the scene of the incident. Firefox must be from the source by adding event parameters . Ie ignore the parameters, using window.event to read the event.
Solution:
IE & Firefox:
Submitted (event) "/> ...
<script language="javascript">
function Submitted (evt) (
evt = evt? evt: (window.event? window.event: null);
)
</ Script>

3. Custom attribute description of the problem: IE, you can use to obtain general properties of the method to obtain custom attributes, you can use the getAttribute () for custom properties; Firefox, it can only use the getAttribute () for custom attributes.
Solution: unified by getAttribute () for custom attributes.

4. Var

【Description】 analysis see the following code:

echo = function (str) (document.write (str);)
This function is normal in the run IE, Firefox under which this error was.

【Treatment】 compatible with var in echo to normal before, and this is our aim that var.

5.event.x and event.y description of the problem: IE next, even objects with x, y properties, but no pageX, pageY property; Firefox under, even objects have pageX, pageY property, but there is no x, y properties.
Solution: Use mX (mX = event.x? Event.x: event.pageX;) instead of IE or Firefox under event.x under event.pageX.

6.event.srcElement description of the problem: IE Next, event object has srcElement property, but there is no target attribute; Firefox under, even objects with target attributes, but no srcElement property.
Solution: use obj (obj = event.srcElement? Event.srcElement: event.target;) instead of IE or Firefox under event.srcElement under the event.target. Please also note event of compatibility issues.

7.window.location.href description of the problem: IE or Firefox2.0.x, you can use window.location or window.location.href; Firefox1.5.x, the only use window.location.
Solution: use window.location instead of window.location.href.

8.body question Firefox's body in the body tag has not been completely read into the browser existed before; while IE's body in the body tag must be completely read into the browser only after there.

9. The event delegate method IE: document.body.onload = inject; / / Function inject () has been achieved before in the Firefox: document.body.onload = inject ();

10. Firefox and IE's parent element (parentElement) the difference between IE: obj.parentElement
firefox: obj.parentNode solution: for firefox and IE support the DOM, so use obj.parentNode is a good choice. 17.cursor: hand VS cursor: pointer firefox does not support the hand, but it ie to support pointer solutions: unified use of pointer

11.innerText in IE to work normally, but in FireFox the innerText does not. Xuyong textContent. Solution: if (navigator.appName.indexOf ("Explorer")> -1) (document.getElementById ('element'). InnerText = "my text";) else (document.getElementById ('element'). TextContent = "my text";) 19. FireFox HTML tags for style setting, all the position and font size of the value must be followed by px. The ie is also supported.

12. Ie, firefox and other browser tab for table operations are different, ie not allowed in the table and tr the innerHTML of the assignment, use js to add a tr, the using the appendChild method will not work. Solution: / / append a blank line to the table:
var row = otable.insertRow (-1);
var cell = document.createElement ("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild (cell);

Second, access and set the style

1. CSS's "float" property

【Description】 Javascript access of a given value of basic CSS syntax is: object.style.property, but some CSS attributes with Javascript reserved words in the same name, such as the "float", "for", "class", etc. different way of writing in different browsers.

In IE, like this:

document.getElementById ("header"). style.styleFloat = "left";
In Firefox, like this:

document.getElementById ("header"). style.cssFloat = "left";
【Treatment】 compatible one before the judge in writing to determine whether the browser is IE:

if (document.all) (document.getElementById ("header"). style.styleFloat = "left";) else (document.getElementById ("header"). style.cssFloat = "left";)

2. Access <label> tab "for"

【Description】 analysis and "float" property, same as the syntax is not required to access the distinction <label> tab "for".

In IE, like this:

var myObject = document.getElementById ("myLabel"); var myAttribute = myObject.getAttribute ("htmlFor");
In Firefox, like this:

var myObject = document.getElementById ("myLabel"); var myAttribute = myObject.getAttribute ("for");
【Treatment】 compatible solution is also the first to check browser type.

3. Access and set the class attribute

】 【Analysis shows the same class is a Javascript reserved words as the reason, these two browsers use different JavaScript methods to obtain this property.

IE8.0 all IE versions prior written:

var myObject = document.getElementById ("header"); var myAttribute = myObject.getAttribute ("className");
Applicable to IE8.0 and firefox wording:

var myObject = document.getElementById ("header"); var myAttribute = myObject.getAttribute ("class");
In addition, use setAttribute () set the Class attribute of the time, there are also two browser differences.

setAttribute ("className", value);

This expression applies to all IE versions prior to IE8.0, attention: IE8.0 does not support the "className" attribute of the.

setAttribute ("class", value); applicable to IE8.0 and firefox.

【Treatment】 compatible

Method 1, both are written on:

var myObject = document.getElementById ("header"); myObject.setAttribute ("class", "classValue"); myObject.setAttribute ("className", "classValue"); / / set the header of the class as classValue
Method II, IE and FF support object.className, so you can write:

var myObject = document.getElementById ("header"); myObject.className = "classValue"; / / set the header of the class as classValue
Method 3, first determine browser type, browser type and then used according to the corresponding version.

4. The object width and height assignment problem

【Description】 FireFox analysis of similar obj.style.height = imgObj.height the statement is invalid.

【Treatment】 unified compatible use obj.style.height = imgObj.height + 'px';

3, DOM methods and object reference

1. GetElementById

【Description】 first view of a set of code:

<! - Input object access 1 -> <input type="button" value="click me" ōnclick="alert(id.value)"/>
In Firefox, the button did not respond, in IE, you can, because for IE is an HTML element's ID can be directly in the script as a variable name to use, and Firefox, can not.

【Treatment】 compatible W3C DOM as far as possible the wording of access to the object when using document.getElementById ("id") to access the object ID and an ID must be unique in the page, the same label name in order to access When an object with document.getElementsByTagName ("div") [0]. The way to get more browser support.

<! - Input object access 2 -> <input type="button" value="click me" />

2. Collections Object Access

【Description】 IE analysis, you can use () or [] for a collection class object; Firefox, the only use [] for a collection class object. Such as:

document.write (document.forms ("formName"). src); / / under the wording of the IE can access to the Form object scrc property deal】 【compatible to document.forms ("formName") to document.forms [ "formName"]. Unified use [] for a collection class object.

3. Frame of reference

【Description】 IE analysis can access the id or name corresponding to the window frame object, but Firefox can only be accessed by name in this frame corresponds to the window object.

For example, if the frame label written on the top of the window inside the htm inside, so you can access:

IE: window.top.frameId or window.top.frameName to access the window object;

Firefox: can this window.top.frameName to access the window object.

【Treatment】 compatible frame of the name used to access the frame objects, In addition, in both IE and Firefox can be used window.document.getElementById ("frameId") to access the frame object.

4. ParentElement

【Description】 IE in support of the use parentElement and access to the parent node parentNode. The Firefox can only use parentNode.

【Treatment】 compatible for firefox and IE support the DOM, so the unification of the parent node using the parentNode to visit.

5. Table operation

【Description】 analysis under the table in both IE using innerHTML or appendChild into <tr> have no effect, but other browsers are displayed normal.

【Treatment】 compatible solution is to add the table of <tbody> <tr> elements, such as shown below:

var row = document.createElement ("tr"); var cell = document.createElement ("td"); var cell_text = document.createTextNode ("Insert the contents of the"); cell.appendChild (cell_text); row.appendChild (cell ); document.getElementsByTagName ("tbody") [0]. appendChild (row);

6. Remove node removeNode () and removeChild ()

【Description】 appendNode of IE and Firefox at all under normal use, but only in IE under removeNode use.

removeNode method function is to delete a node, the syntax for the node.removeNode (false) or node.removeNode (true), the return value is the node to be deleted.

removeNode (false) that only delete the specified node, then the child node of this node's original upgrade of the original parent node child node.

removeNode (true) that remove the specified node and all its subordinate nodes. Deleted node, the node has become isolated, no longer has a child node and parent node.

【Treatment】 compatible with Firefox in the node is not removeNode it can only be replaced with the removeChild method, first return to the parent node, the node removed from the parent node to be removed.

node.parentNode.removeChild (node); / / ie and firefox in order to be able, under normal use, to take on the level of the parent node, then remove.

7. ChildNodes access node

【Description】 childNodes of the underlying meaning of the next IE and Firefox different, look at the following code:

<ul> <li> 1 </ li> <li> 2 </ li> <li> 3 </ li> </ ul> <input type=button value="click me!">
Were run with IE and Firefox, IE the result is 3, while Firefox is 7. Firefox use the DOM specification, "# text", said the text (actually meaningless spaces and line breaks, etc.) will be resolved in the Firefox into a node, in IE only meaningful in the text will resolve into a "# text . "

【Treatment】 compatible

Method 1, for child nodes, can node.getElementsByTagName () to avoid this problem. But the getElementsByTagName DOM structure of the complex traversal obviously not as good as using childNodes, because of better handling of DOM childNodes hierarchy.

The second method in practical use, Firefox child nodes in the traversal, we might add in the for loop:

if (childNode.nodeName == "# text") continue; / / Or use the nodeType == 1.
So you can skip some of the text node.

Further reading

"IE and FireFox in the childNodes difference"

8. Firefox can not support the innerText

【Description】 Firefox does not support analysis of innerText, it supports textContent to achieve innerText, but not as innerText textContent considered as elements of display mode, so I do not fully compatible with IE. If you do not textContent, the string does not contain HTML code which can also be used instead of innerHTML. Js can also write a method to achieve, refer to "achieve innerText property to firefox" article.

【Treatment】 compatible browser by judging the type of compatibility:

if (document.all) (document.getElementById ('element'). innerText = "my text";) else (document.getElementById ('element'). textContent = "my text";)

4, event handling

If the use of javascript, when related to event processing, you need to know the event in a different browser differences, the main JavaScript event model, there are three (see "Supporting Three Event Models at Once"), they were NN4, IE4 + and W3C/Safar.

1. Window.event

【Description】 look at a piece of code analysis

function et () (alert (event); / / IE: [object])
IE is running above code results in the [object], but can not run in Firefox.

Because in the IE window object in the event as an attribute can be used directly, but in Firefox, but use the W3C's model, it is by way of mass participation in the event spread, meaning that you need for your function is to provide an event response interface.

【】 To add event handling compatible to judge, according to the different browser to get the correct event:

function et () (evt = evt? evt: (window.event? window.event: null); / / compatible with IE and Firefox alert (evt);)

2. Keyboard values obtained

【Description】 IE and Firefox of access to the keyboard value of different methods, can be understood, Firefox and IE under event.which event.keyCode under considerable. On different, refer to "Keyboard event keyCode, which and charCode compatibility test"

【Treatment】 compatible

function myKeyPress (evt) (/ / compatible with IE and Firefox get keyBoardEvent object evt = (evt)? evt: ((window.event)? window.event: "") / / compatible with IE and Firefox var key object was keyBoardEvent key = evt.keyCode? evt.keyCode: evt.which; if (evt.ctrlKey & & (key == 13 | | key == 10)) (/ / while pressing the Ctrl and the Enter key / / do something; ))

3. Access to the event source

【Description】 analysis commissioned by the use of the event, when judged by the event source for which elements from the event in the end, however, under IE, event objects are srcElement property, but there is no target attribute; Firefox under, even objects with target attributes, but no srcElement property.

【Treatment】 compatible

ele = function (evt) (/ / capture the role of the current event object evt = evt | | window.event; return (obj = event.srcElement? event.srcElement: event.target;);)

4. Event listener

【Note】 In case of monitoring processing, IE provides the attachEvent and detachEvent two interfaces, while Firefox offers the addEventListener and removeEventListener.

【Treatment】 compatible simplest treatment is to package the two sets of compatibility interface:

function addEvent (elem, eventName, handler) (if (elem.attachEvent) (elem.attachEvent ("on" + eventName, function () (handler.call (elem))); / / here use the callback function call ( ), so this point elem) else if (elem.addEventListener) (elem.addEventListener (eventName, handler, false);)) function removeEvent (elem, eventName, handler) (if (elem.detachEvent) (elem.detachEvent (" on "+ eventName, function () (handler.call (elem))); / / here use the callback function call (), so this point elem) else if (elem.removeEventListener) (elem.removeEventListener (eventName, handler , false);))
Require special attention, Firefox, the event handler in this point to be monitored element itself is not the case in the next IE, use the callback function call, to monitor the current context point to the element.

5. Right here

【Description】 IE under analysis, even objects with x, y properties, but no pageX, pageY property; Firefox under, even objects have pageX, pageY property, but there is no x, y properties.

【Treatment】 compatible use mX (mX = event.x? Event.x: event.pageX;) instead of IE or Firefox under event.x under event.pageX. Complex point absolute position should also be considered.

function getAbsPoint (e) (var x = e.offsetLeft, y = e.offsetTop; while (e = e.offsetParent) (x + = e.offsetLeft; y + = e.offsetTop;) alert ("x:" + x + "," + "y:" + y);)

5, compatible with other treatment differences

1. XMLHttpRequest

Analysis shows】 【new ActiveXObject ("Microsoft.XMLHTTP"); only play a role in IE, Firefox does not support, but support for XMLHttpRequest.

【Treatment】 compatible

function createXHR () (var xhr = null; if (window.XMLHttpRequest) (xhr = new ActiveXObject ("Msxml2.XMLHTTP");) else (try (xhr = new ActiveXObject ("Microsoft.XMLHTTP");) catch () (xhr = null;)) if (! xhr) return; return xhr;)

2. Mode and non-modal window

【Description】 IE can be analyzed by showModalDialog and showModelessDialog open modal and non-modal windows, but Firefox does not support.

】 【Solution directly window.open (pageURL, name, parameters) way to open a new window. If you need to pass parameters, you can use frame or iframe.

3. Input.type Attribute

Property is read-only under the input.type IE, but Firefox can be modified under

4. On select elements of option operation

Setting options, IE and Firefox different way of writing:

Firefox: can be set directly

option.text = 'foooooooo';
IE: only settings

option.innerHTML = 'fooooooo';
Select the option to delete a method:

Firefox: can

select.options.remove (selectedIndex);
IE7: can

select.options [i] = null;
IE6: need to write

select.options [i]. outerHTML = null;

5. Img alt and title of the resolution target

【Description】 img object of alt and title have two properties, difference is, alt: when the photo does not exist, or when prompted to load error.

title: photo tip description, if not defined in IE in the title, alt the tip can also be used as an img, but in Firefox, the two are completely in accordance with the standard definition used in

Img object in the definition.

Compatible with the best deal】 【alt and title objects will write the whole, to ensure a variety of browsers can be used normally.

6. Img's src refresh problem

【Note】 a look at the code analysis:

<img"this.src='a.jpg'" src="aa.jpg"/>
In IE, the code can be used to refresh the image, but not work under FireFox. The main problem is the cache.

Compatible processing】 【back in the address by adding a random number to resolve:

<img"javascript:this.src=this.src+'?' +Math.random()"src="a.jpg"/>

相关文章
  • IE and Firefox's Javascript Compatibility Summary 2010-05-11

    First, differences in functions and methods 1. GetYear () method [Note] a look of the following code: var year = new Date (). getYear (); document.write (year); In IE to get a date "2010" in Firefox to see the date is "110", mainly bec

  • js css and browser compatibility summary 2010-12-23

    Reprinted: css and js browser compatibility summary http://hi.baidu.com/injava/blog/item/40f1e5de0cc8535c94ee3795.html First of all talk about the browser, although it is still the browser market, ie the boss, about 67% share of possession, but becau

  • (Reprinted) IE6 compatibility summary 2010-07-05

    IE6 compatibility summary Source Address: http://hi.baidu.com/chy0806css/blog/item/fa53ba7e4aec340529388a3c.html 1, the ultimate method: Conditional Comments <!--[ If lte IE 6]> This text only appears in the following versions of IE6 and IE6. <!

  • CSS browser compatibility summary ie6 ie7, Fireofx 2011-05-12

    Original: http://www.52css.com/article.asp?id=1026 Collected from the Internet IE7, 6 compatibility with Fireofx approach and organize a bit. For over web2.0, please try to write code using xhtml format, but affect the CSS DOCTYPE treated as a W3C st

  • Compatibility Summary 2010-09-07

    Compatibility Summary

  • IE与FireFox的JavaScript兼容问题解决办法 2014-08-09

    本篇文章主要是对IE与FireFox的JavaScript兼容问题解决办法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 以下是 我在开发中遇到的情况: 1.动态删除table里的某一行. table:表示table对象. k:表示行号 table.rows[k].removeNode(true); //firefox执行失败,ie执行成功 IE与FireFox兼容写法 table.deleteRow(k); 2.为HTML标签自定义属性. inputElement:表示表单

  • 兼容Firefox的Javascript XSLT 处理XML文件 2014-10-16

    这篇文章主要介绍了兼容Firefox的Javascript XSLT 处理XML文件,需要的朋友可以参考下 最近使用Firefox进行网页的调试,发现有些Javascript XSLT处理XML的语句仅仅支持IE浏览器.而网络中的一些介绍javascript XSLT 处理XML的文章基本上都是依据AJAX来做的. 无奈中,自己写了一个Javascript XSLT处理XML展现页面的小功能.现在帖出来和大家共享,希望大家给点改进意见. 在Firefox中使用XSLTProcessor对象处理X

  • IE和Firefox的Javascript兼容性总结[推荐收藏] 2015-03-31

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬 长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 一.函数和方法差异: 二.样式访问和设置: 三.DOM方法及对象引用: 四.事件处理: 五.其他差异的兼容处理. 一.函数和方法差异 1. g

  • 兼容IE和Firefox的javascript获取iframe文档内容的函数 2015-05-01

    兼容IE和Firefox的javascript获取iframe文档内容的函数,需要的朋友可以参考下. <script type="text/javascript"> function getIframeContent(){ //获取iframe中文档内容 var doc; if (document.all){//IE doc = document.frames["MyIFrame"].document; }else{//Firefox doc = doc

  • Firefox最新JavaScript引擎初探 2014-08-04

    从 Google 推出含 V8 JavaScript 引擎的 Chrome 以来,公众对 JavaScript 引擎执行效率的胃口又一次被提高,众多浏览器的开发者们绞尽脑汁提升他们的 JavaScript 性能,Opera 最新的10.50 版的 Carakan 引擎据称已经超过 V8,而 Firefox 的开发者们也不甘示弱. 最近升级到 Firefox 3.6 的用户已经发现他们的 JavaScript 速度有了非常明显的改善,虽然Firefox 的 TraceMonkey 引擎和 Goog

  • JavaScript in IE and Firefox compatibility summary 2010-06-27

    1.document.formName.item ("itemName") issues Description: IE, it can be used document.formName.item ("itemName") or document.formName.elements ["elementName"]; Firefox, the only use document.formName.elements ["elementNa

  • IE and Firefox browsers javascript.CSS Compatibility Study 2010-03-27

    Reprinted: http://blog.csdn.net/herojams/archive/2009/07/01/4311884.aspx To the company's products achieved under IE and Firefox compatible, some time ago to do the following research. As the English documentation is ready before, I do not bother and

  • JavaScript in IE and FireFox on the compatibility 2010-10-14

    firefox does not window.event object, in fact, this would not have great trouble, however, read the following example, you know that the problems caused by the trouble. Suppose, now I want to monitor the movement of a mouse button, anywhere in the br

  • DIV + CSS browser compatibility summary of methods 2011-01-10

    Most Internet companies are now compared to advocate the use of div + css layout, which is facing a more difficult problem - browser compatibility. After a long summary, obtained following all common browsers (now available in the market mainly used

  • The CSS is compatible with the Firefox.Safari IE6.IE7 Summary 2010-07-12

    1. Padding & margin padding time, IE & Firefox, like, div's size will increase, div padding the corresponding position to increase the value of the corresponding position. Margin time, IE6, IE7 div's parent container to benchmark the margin of, Fi

  • Firefox and ie compatibility issues 2010-07-26

    1. Document.form.item problem (1) Existing problems: There are many existing code document.formName.item ("itemName") This statement can not be in Firefox (Firefox) to run (2) solutions: Use document.formName.elements ["elementName"] 2

  • IE和Firefox下javascript的兼容写法小结 2013-12-12

    学习js的朋友必须要知道或了解的知识 1.发现IE下input标签的id属性默认和name属性相同,而Firefox必须明确写出id属性的名称否则不能使用id属性. 如:<input type="text" name="username" value=""> 在IE下如下代码可以执行而在Firefox下却不可以: <script> alert(document.getElementById("username&q

  • 支持IE,Firefox的javascript 日历控件 2014-04-06

    javascript 日历控件 支持IE,Firefox,效果还不错,需要的朋友可以参考下,脚本之家之前曾发布多篇类似的文章,需要的朋友可以搜索下. 效果图: 其实学习的方法,就是会搜索的方法,会搜索才能更快的解决问题. 搜索方法: javascript 日历控件 site:jb51.net| 日期输入框演示-jb51.net script 选择日期: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • IE和Firefox在JavaScript应用中的兼容性探讨 2014-07-16

    今天在使用CSS属性的时候发现"cursor:hand;"在Firefox中鼠标不会变为手型,后来上网搜索了一下资料,发现hand这个cursor属性在Firrefox中不兼容,使用"cursor:pointer"就都可以显示了. 1.document.formName.item("itemName") 问题 说 明:IE下,可以使用document.formName.item("itemName")或document.for

  • IE与Firefox在JavaScript上的7个不同写法小结 2014-12-29

    尽管那需要用长串的.沉闷的不同分支代码来应付不同浏览器的日子已经过去,偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行. 在这篇文章中,作者介绍了7个在IE和Firefox中不同的JavaScript句法. 1. CSS "float" 值 访问一个给定CSS 值的最基本句法是: object.style.property ,使用驼峰写法来替换有连接符的值,例如,访问某个ID为"header"的<div>的backgroun