Home Web Front-end JS Tutorial Summary of solutions to JavaScript incompatibility issues between IE and Firefox_javascript skills

Summary of solutions to JavaScript incompatibility issues between IE and Firefox_javascript skills

May 16, 2016 pm 06:29 PM
firefox ie

1.兼容firefox的 outerHTML,FF中没有outerHtml的方法。
复制代码 代码如下:

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;iattr=attrs[i];
if(attr.specified)
str =" " attr.name '="' attr.value '"';
}
if(!this.canHaveChildren)
return str ">";
return str ">" this.innerHTML "";
});
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;
});
}

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:
复制代码 代码如下:


...


IE&Firefox:
复制代码 代码如下:


...


9.Event.x and event.y issues
Explanation: Under IE, the even object has x, y attributes, but does not have pageX, pageY attributes; under Firefox, the even object has pageX, pageY attribute, but there is no x, y attribute.
Solution: Use mX (mX = event.x? event.x: event.pageX;) to replace event.x under IE or event.pageX under Firefox.

10.event.srcElement problem
Explanation: Under IE, the even object has the srcElement attribute, but no target attribute; under Firefox, the even object has the target attribute, but no srcElement attribute .
Solution: Use obj (obj = event.srcElement ? event.srcElement : event.target;) instead of event.srcElement under IE or event.target under Firefox.
11.window .location.href problem
Explanation: Under IE or Firefox2.0.x, you can use window.location or window.location.href; under Firefox1.5.x, you can only use window.location.
Solution: Use window.location instead of window.location.href.
12. Modal and non-modal window issues
Note: Under IE, the modal can be opened through showModalDialog and showModelessDialog Modal and non-modal windows; not available under Firefox.
Solution: Directly use window.open(pageURL, name, parameters) to open a new window.
If you need to pass parameters in the child window back to the parent window, you can use window.opener in the child window to access the parent window. For example: var parWin = window.opener; parWin.document.getElementById("Aqing"). value = "Aqing";
13.Frame problem
Take the following frame as an example:

(1) Access the frame object:
IE: Use window.frameId or window.frameName to access this frame object.
Firefox: You can only use window.frameName to access this frame object .
In addition, you can use window.document.getElementById("frameId") in both IE and Firefox to access this frame object.
(2) Switch frame content:
Can be used in both IE and Firefox Use window.document.getElementById("testFrame").src = "xxx.html" or window.frameName.location = "xxx.html" to switch the content of the frame.
If you need to pass the parameters in the frame back to the parent Window, you can use parent in frme to access the parent window. For example: parent.document.form1.filename.value="Aqing";
14.body problem
Firefox’s body exists before the body tag is fully read by the browser; and IE's body must exist after the body tag is completely read by the browser.
For example:
Firefox:
Copy code The code is as follows:





IE&Firefox :
Copy code The code is as follows:





15. Event delegate method
IE: document.body.onload = inject; //Function inject() in This has been implemented before
Firefox: document.body.onload = inject();
Some say the standard is:
document.body.onload=new Function('inject()');

16. The difference between the parent element of firefox and IE (parentElement)
IE: obj.parentElement
firefox: obj.parentNode
Solution: Because both firefox and IE support it DOM, so using obj.parentNode is a good choice.

17.cursor:hand VS cursor:pointer
firefox does not support hand, but ie supports pointer
Solution: Use pointer uniformly

18. innerText can work normally in IE, but innerText does not work in FireFox.
Solution:
Copy code The code is as follows:

if(navigator.appName.indexOf("Explorer") > -1){
document. getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}

19. Statements like obj.style.height = imgObj.height are invalid in FireFox
Solution:
obj.style.height = imgObj.height 'px';

20. IE, Firefox and other browsers have different operations on table tags. In IE, innerHTML assignment of table and tr is not allowed. When using js to add a tr, use The appendChile method doesn't work either.
Solution:
Copy code The code is as follows:

//Append one to the table Empty row:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = " XXXX";
row.appendChild(cell);

21. padding problem
padding 5px 4px 3px 1px FireFox cannot interpret the abbreviation,
must be changed into padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

22. When eliminating the indentation of ul, ol and other lists
The style should be written as: list-style:none;margin:0px;padding:0px;
The margin attribute is valid for IE, and the padding attribute is valid for FireFox

23. CSS transparency
IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF:opacity:0.6.

24. CSS rounded corners
IE: Rounded corners are not supported.
FF: -moz-border-radius:4px, or -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -border- radius- bottomright:4px;.
25. CSS double line bump border
IE: border:2px offset;.
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;

Here are also some related compatibility between IE and Firefox
A collection of solutions for incompatibility between IE and Firefox
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to remove Firefox Snap in Ubuntu Linux? How to remove Firefox Snap in Ubuntu Linux? Feb 21, 2024 pm 07:00 PM

To remove FirefoxSnap in Ubuntu Linux, you can follow these steps: Open a terminal and log in to your Ubuntu system as administrator. Run the following command to uninstall FirefoxSnap: sudosnapremovefirefox You will be prompted for your administrator password. Enter your password and press Enter to confirm. Wait for command execution to complete. Once completed, FirefoxSnap will be completely removed. Note that this will remove versions of Firefox installed via the Snap package manager. If you installed another version of Firefox through other means (such as the APT package manager), you will not be affected. Go through the above steps

Internet Explorer opens Edge: How to stop MS Edge redirection Internet Explorer opens Edge: How to stop MS Edge redirection Apr 14, 2023 pm 06:13 PM

It's no secret that Internet Explorer has fallen out of favor for a long time, but with the arrival of Windows 11, reality sets in. Rather than sometimes replacing IE in the future, Edge is now the default browser in Microsoft's latest operating system. For now, you can still enable Internet Explorer in Windows 11. However, IE11 (the latest version) already has an official retirement date, which is June 15, 2022, and the clock is ticking. With this in mind, you may have noticed that Internet Explorer sometimes opens Edge, and you may not like it. So why is this happening? exist

What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser) What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser) Feb 10, 2024 am 10:30 AM

More and more users are starting to upgrade the win11 system. Since each user has different usage habits, many users are still using the ie11 browser. So what should I do if the win11 system cannot use the ie browser? Does windows11 still support ie11? Let’s take a look at the solution. Solution to the problem that win11 cannot use the ie11 browser 1. First, right-click the start menu and select "Command Prompt (Administrator)" to open it. 2. After opening, directly enter "Netshwinsockreset" and press Enter to confirm. 3. After confirmation, enter "netshadvfirewallreset&rdqu

Can mozilla firefox be uninstalled? Can mozilla firefox be uninstalled? Mar 15, 2023 pm 04:40 PM

Mozilla Firefox can be uninstalled; Firefox is a third-party browser and can be uninstalled if it is not needed. Uninstallation method: 1. In the Start menu, click "Windwos System" - "Control Panel"; 2. In the "Control Panel" interface, click "Programs and Features"; 3. In the new interface, find and double-click Firefox Browser icon; 4. In the uninstall pop-up window, click "Next"; 5. Click "Uninstall".

How to cancel the automatic jump to Edge when opening IE in Win10_Solution to the automatic jump of IE browser page How to cancel the automatic jump to Edge when opening IE in Win10_Solution to the automatic jump of IE browser page Mar 20, 2024 pm 09:21 PM

Recently, many win10 users have found that their IE browser always automatically jumps to the edge browser when using computer browsers. So how to turn off the automatic jump to edge when opening IE in win10? Let this site carefully introduce to users how to automatically jump to edge and close when opening IE in win10. 1. We log in to the edge browser, click... in the upper right corner, and look for the drop-down settings option. 2. After we enter the settings, click Default Browser in the left column. 3. Finally, in the compatibility, we check the box to not allow the website to be reloaded in IE mode and restart the IE browser.

The end of an era: Internet Explorer 11 is retired, here's what you need to know The end of an era: Internet Explorer 11 is retired, here's what you need to know Apr 20, 2023 pm 06:52 PM

June 15, 2022 is the day when Microsoft ends support for Internet Explorer 11 (IE11) and closes its legacy browser chapter. The company has been reminding users of this end-of-life date for some time and calling on them to plan a move to Microsoft Edge. Microsoft bundles IE11 with Windows 8.1 as the modern default web browser for Windows. Although it never reached the (current) heights of Chrome, it was the second most used desktop browser in 2014, behind IE8. Of course, with 20

How to solve the problem that IE shortcut cannot be deleted How to solve the problem that IE shortcut cannot be deleted Jan 29, 2024 pm 04:48 PM

Solutions to IE shortcuts that cannot be deleted: 1. Permission issues; 2. Shortcut damage; 3. Software conflicts; 4. Registry issues; 5. Malicious software; 6. System issues; 7. Reinstall IE; 8. Use third-party tools; 9. Check the target path of the shortcut; 10. Consider other factors; 11. Consult professionals. Detailed introduction: 1. Permission issue, right-click the shortcut, select "Properties", in the "Security" tab, make sure you have sufficient permissions to delete the shortcut. If not, you can try running as an administrator, etc.

Firefox 113 new features: support for AV1 animations, enhanced password generator and picture-in-picture features Firefox 113 new features: support for AV1 animations, enhanced password generator and picture-in-picture features Mar 05, 2024 pm 05:20 PM

According to recent news, while Mozilla released the stable version of Firefox 112, it also announced that the next major version, Firefox 113, has entered the Beta channel and supports AV1 animations, enhanced password generator and picture-in-picture features. The main new functions/features of Firefox 113 are as follows: Support for AV1 format animated images (AVIS); Enhance the security of the password generator by introducing special characters; Enhance the picture-in-picture function, support rewind, display video time, and enable full screen more easily Mode provides official DEB installation files for Debian and Ubuntu distributions. Updated bookmark import feature, icons for imported bookmarks are supported by default. Hardware accelerated AV1 video decoding is enabled by default on supported hardware using w

See all articles