转载 Javascript的IE和Firefox兼容性汇编

微软关于IE、Firefox、Opera和Safari的JavaScript兼容性研究曾经发表过一份草案,可以点击下载《JScript Deviations from ES3》 以下为网上的一些搜集和整理(FF代表Firefox)

 集合类对象问题
现有代码中存在许多 document.form.item("itemName") 这样的语句，不能在 FF 下运行
解决方法：
改用 document.form.elements["elementName"]
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.


window.event
现有问题：
使用 window.event 无法在 FF 上运行
解决方法：
FF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在IE中运行)：
<input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit()"/>
<script language="javascript">
    function gotoSubmit() {
       alert(window.event);    // use window.event
    }
</script>
新代码(可在IE和FF中运行)：
<input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit(event)"/>
<script language="javascript">
   function gotoSubmit(e) {
      e = e? e : (window.event ? window.event : null);
      alert(e);           
  }
</script>
此外，如果新代码中第一行不改，与老代码一样的话（即 gotoSubmit 调用没有给参数），则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

 

HTML 对象的 id 作为对象名的问题
现有问题：
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 FF 中不能。
解决方法：
用 getElementById("idName") 代替 idName 作为对象变量使用。

用idName字符串取得对象的问题
现有问题：
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在FF 中不能。
解决方法：
用 getElementById(idName) 代替 eval(idName)。

 

变量名与某 HTML 对象 id 相同的问题
现有问题：
在 FF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
解决方法：
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。

 

event.x 与 event.y 问题
现有问题：
在IE 中，event 对象有 x, y 属性，FF中没有。
解决方法：
在FF中，与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
其它：
event.layerX 在 IE 与 FF 中都有，具体意义有无差别尚未试验。

 

关于frame
现有问题：
在 IE中 可以用window.testFrame取得该frame，FF中不行
解决方法：
在frame的使用方面FF和ie的最主要的区别是：
如果在frame标签中书写了以下属性：
<frame src="/xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而FF只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
IE： window.top.frameId或者window.top.frameName来访问这个window对象
FF： 只能这样window.top.frameName来访问这个window对象
另外，在FF和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容

 

父结点的问题
在FF中没有 parentElement parentElement.children  而用 parentNode parentNode.childNodes
childNodes的下标的含义在IE和FF中不同，FF使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。当html中节点缺失时，IE和FF对parentNode的解释不同，例如
<form>
<table>
  <input/>
</table>
</form>
FF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
FF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

 

const 问题
现有问题：
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
解决方法：
不使用 const ，以 var 代替。

body 对象
FF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

 

URLencoding
在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般FF无法识别js中的&

 

nodeName 和 tagName 问题
现有问题：
在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象有问题
解决方法：
使用 tagName，但应检测其是否为空。

 

元素属性
IE下 input.type属性为只读，但是FF下可以修改
document.getElementsByName() 和 document.all[name] 的问题
在 IE 中，getElementsByName()、document.all[name] 均不能用来取得多个具有相同name的div 元素集合。

 

兼容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;i<attrs.length;i++) {
            attr=attrs[i];
            if(attr.specified)
                str+=" "+attr.name+'="'+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下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;FF下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

 
event.srcElement问题
说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.


window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.


模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口
如 果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

 

事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
FF：document.body.onload = inject();
如果要加传递参数，可以做个闭包
(function(arg){

   document.body.οnlοad=function(){inject(arg);};

})(arg)

innerText在IE中能正常工作，但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
    document.getElementById('element').innerText = "my text";
} else{
    document.getElementById('element').textContent = "my text";
}


FF中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
obj.style.height = imgObj.height + 'px';


IE,FF以及其它浏览器对于 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);


样式部分
-----------------------------------------------------------------------------------------------------------
cursor:hand VS cursor:pointer
FF不支持hand，但ie支持pointer
解决方法: 统一使用pointer

padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

消除ulol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效

CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
FF：opacity:0.6

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;

CSS双线凹凸边框
IE：border: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;

转载于:https://www.cnblogs.com/wangbin/archive/2009/04/14/1435442.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/379696.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

存储器间接寻址方式_8086微处理器的程序存储器寻址模式

存储器间接寻址方式_8086微处理器的程序存储器寻址模式

存储器间接寻址方式The Program Memory Addressing mode is used in branch instructions. These branch instructions are instructions which are responsible for changing the regular flow of the instruction execution and shifting the control to some other location…
阅读更多...
Servlet的配置

Servlet的配置

1&#xff0c;基本配置 <!-- Servlet类的配置 --><servlet><servlet-name>sq</servlet-name><servlet-class>beyond.servlet.QuickStartServlet</servlet-class></servlet><!-- Servlet的虚拟路径的配置 --> <servlet-mapp…
阅读更多...
Asp.net页面生存周期

Asp.net页面生存周期

# 事件或方法 功能 描述 　　1 Init 事件 页面初始化 初始化设置。 　　2 LoadViewState 方法 加载视图状态 填充ViewState属性。 　　3 LoadPostData 方法 处理回发数据 处理传入窗体数据。 　　4 Load 事件 加载页面 页面控件初始化完成并反映了客户端的数据。 　　5 RaisePo…
阅读更多...
你正确关闭WCF链接了吗？

你正确关闭WCF链接了吗？

通常情况下我们关闭一个WCF链接都是简单地写把ICommunicationObject.Close()方法&#xff0c;但是这个方法有个问题就是当调用发生异常时&#xff0c;Close()会发生次生的异常&#xff0c;导致链接不能正常关闭。如果当这种异常很多时&#xff0c;必然对系统的稳定性有很大的影…
阅读更多...
Visual Studio进行linux远程开发

Visual Studio进行linux远程开发

目录准备工作创建一个项目配置远程项目准备工作 查看linux IP地址 安装了工具 sudo apt-get install openssh-server g gdb make ninja-build rsync zip开启ssh服务&#xff1a; sudo service ssh startVS2019按装了linux功能&#xff0c;如果没有&#xff0c;找到Visual S…
阅读更多...
在给定总和K的二叉树中找到级别

在给定总和K的二叉树中找到级别

Description: 描述&#xff1a; The article describes how to find the level in a binary tree with given sum K? This is an interview coding problem came in Samsung, Microsoft. 本文介绍了如何在给定总和K下在二叉树中找到级别 &#xff1f; 这是一个面试编码问题&a…
阅读更多...
PostgreSQL学习手册(数据库维护) 转

PostgreSQL学习手册(数据库维护) 转

原文&#xff1a; PostgreSQL学习手册(数据库维护)一、恢复磁盘空间&#xff1a;在PostgreSQL中&#xff0c;使用delete和update语句删除或更新的数据行并没有被实际删除&#xff0c;而只是在旧版本数据行的物理地址上将该行的状态置为已删除或已过期。因此当数据表中的数据变化…
阅读更多...
++i与i++的根本性区别（两个代码对比搞定）

++i与i++的根本性区别（两个代码对比搞定）

首先来看i 代码如下&#xff1a; #include <stdio.h> #include <stdlib.h> int main() {int i0;int ai;printf("%d\n",a);printf("%d\n\n\n",i);return 0; }输出结果如下&#xff1a; 解释&#xff1a;i其实是两行代码的简写形式&#xff0c…
阅读更多...
国企和外企的比较

国企和外企的比较

由于本人在外企&#xff0c;而很多朋友在国企&#xff0c;因此我个人的说法应该还是有一定的权威性。 首先&#xff0c;国企和外企不能一概而论。正如任何事物都有三六九等&#xff0c;这个&#xff0c;只能在同等级别上进行比较。 国企分类&#xff1a; 一等国企&#xff1…
阅读更多...
Python | 使用matplotlib.pyplot创建线图

Python | 使用matplotlib.pyplot创建线图

Problem statement: Write a program in python (using matplotlib.pyplot) to create a line plot. 问题陈述&#xff1a;用python编写程序(使用matplotlib.pyplot)以创建线图。 Program: 程序&#xff1a; import matplotlib.pyplot as pltx [1,2,3,4,5,6,7,8,9,10]y [3,…
阅读更多...
QI(接口查询）

QI(接口查询）

接触AE一段时间了&#xff0c;总的来说收获不少&#xff0c;今天仔细分析了一下AE开发中经常会用到的QI即接口查询&#xff0c;有了自己的一些理解。 COM类至少有一个接口。事实上一般它们有好几个接口。即一个类经常会实现多个接口&#xff08;一个类无法继承多个类&#xff0…
阅读更多...
linux内核设计与实现---从内核出发

linux内核设计与实现---从内核出发

获取、编译、安装内核1 获取内核源码安装内核源代码何处安装源码使用补丁2 内核源码树3 编译内核减少编译的垃圾信息衍生多个编译作业安装内核启用指定内核作为引导4 内核开发的特点没有libc库头文件没有内存保护机制容积小而固定的栈1 获取内核源码 在linux内核官方网站http:…
阅读更多...
MySQL在DOS下的基本命令操作

MySQL在DOS下的基本命令操作

启动net start mysql 重置root密码 方法一:在my.ini的[mysqld]字段加入&#xff1a; skip-grant-tables 重启mysql服务&#xff0c;这时的mysql不需要密码即可登录数据库然后进入mysql mysql>use mysql;mysql>更新 user set passwordpassword(新密码) WHERE Userroot; …
阅读更多...
strlen的神奇实现

strlen的神奇实现

https://blog.delphij.net/2012/04/freebsd-strlen3.html 与 Pascal 等语言不同&#xff0c;C 的字符串并不保存串的长度&#xff0c;而是在字符串末尾以 nul 字符&#xff08;\0&#xff09;来表示字符串结束。这个设计决策是上世纪 60 年代作出的&#xff0c;有都市传说是为了…
阅读更多...
python求和_Python程序查找特殊求和系列的解决方案

python求和_Python程序查找特殊求和系列的解决方案

python求和We are going to design a special sum series function which has following characteristics: 我们将设计一个特殊的求和系列函数&#xff0c;该函数具有以下特征&#xff1a; f(0) 0f(1) 1f(2) 1f(3) 0f(x) f(x-1) f(x-3)Python solution of the above sum…
阅读更多...
linux内核设计与实现---进程管理

linux内核设计与实现---进程管理

进程管理1 进程描述符及任务结构分配进程描述符进程描述符的存放进程状态设置当前进程状态进程上下文进程家族树2 进程创建写时拷贝fork()vfork()3 线程在Linux中的实现内核线程4 进程终结删除进程描述符孤儿进程造成的进退微谷5 小结进程的另一个名字叫做任务&#xff08;task…
阅读更多...
JS错误代码解释大全+VBS错误代码解释大全

JS错误代码解释大全+VBS错误代码解释大全

JScript 运行时错误 JScript 运行时错误是指当 JScript 脚本试图执行一个系统不能运行的动作时导致的错误。当正在运行脚本、计算变量表达式、或者正在动态分配内存时出现 JScript 运行时错误时。 错误号 描述 5029 数组长度必须为一有限正整数 5030 必须赋给数组长度一个有…
阅读更多...
生日蜡烛（蓝桥杯）

生日蜡烛（蓝桥杯）

某君从某年开始每年都举办一次生日party&#xff0c;并且每次都要吹熄与年龄相同根数的蜡烛。 现在算起来&#xff0c;他一共吹熄了236根蜡烛。 请问&#xff0c;他从多少岁开始过生日party的&#xff1f; 请填写他开始过生日party的年龄数。 注意&#xff1a;你提交的应该是…
阅读更多...
python日历模块_Python日历模块| firstweekday（）方法与示例

python日历模块_Python日历模块| firstweekday（）方法与示例

python日历模块Python calendar.firstweekday()方法 (Python calendar.firstweekday() Method) firstweekday() method is an inbuilt method of the calendar module in Python. It works on simple text calendars and returns the current setting for the weekday to start…
阅读更多...
php 处理 mysql to json, 前台js处理

php 处理 mysql to json, 前台js处理

public function GetJson(){$query"select * from table";$result mysql_query($query);$rows array();while($row mysql_fetch_array($result)){$rows [] $row;}echo json_encode($rows); } js处理 $.get( "./bll.php", option,function(data ) {var j…
阅读更多...
最新文章

Copyright @ 2022~2023