`

IE_FF_通用js写法__转

阅读更多

在IE 和 Firefox 中兼容使用js




  在家在写页面的时候,尤其是一些门户网站,最后项目组有人规范以下javascrīpt的写法,尽量做到一处编写,多处运行;

  这里有4条经验:

1、在定义 页面元素的时候,如果该页面元素不需要被脚本调用,那么它就不需要定义其name和id属性;

2、如果需要定义页面元素的name,id属性,那么避免不同元素的name和id相同;

3、如果没有特殊需要,尽量让name和id相同,这主要是为了通用

4、在脚本中,获得元素时,尽量用document.getElementById("name / id")  ,能不使用尽量不使用其他的





下面是收集的一些IE和Firefox的差异:



1. 对象问题
1.1 Form对象
现有问题:
现有代码这获得form对象通过document.forms("formName"),这样使用在IE 能接受,MF 不能。
解决方法:
改用 作为下标运算。改为document.forms["formName"]
备注
上述的改用 作为下标运算中的formName是id而name

1.2 HTML对象
现有问题:
在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
document.all("itemName")或者document.all("itemId")
解决方法:
使用对象ID作为对象变量名
document.getElementById("itemId")
备注
document.all是IE自定义的方法,所以请大家尽量不使用。
还有一种方式,在IE和MF都可以使用
var f = document.forms["formName "];
var o = f. itemId;

1.3 DIV对象
现有问题:
在 IE 中,DIV对象可以使用ID作为对象变量名直接使用。在 MF 中不能。
DivId.style.display = "none"
解决方法:
document.getElementById("DivId").style.display = "none"
备注
获得对象的方法不管是不是DIV对象,都使用getElementById方法。参见1.2


1.4 关于frame
现有问题
在 IE中 可以用window.testFrame取得该frame,mf中不行
解决方法
在frame的使用方面MF和IE的最主要的区别是:
如果在frame标签中书写了以下属性:

那么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的内容

1.5 窗口
现有问题
IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口,但是MF不支持。
解决办法
直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要传递参数,可以使用frame或者iframe。

2. 总结
2.1 在JS中定义各种对象变量名时,尽量使用id,避免使用name。
在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能,所以在平常使用时请尽量使用id,避免只使用name,而不使用id。

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

分享到:
评论

相关推荐

    IE、FF的JS兼容写法

    这篇博客文章“IE、FF的JS兼容写法”探讨了如何编写能够同时在IE和FF下运行的兼容性JavaScript代码。 首先,我们需要理解这两个浏览器对于DOM(Document Object Model)操作的处理方式有所不同。例如,IE使用的是`...

    IE和FF兼容问题

    ### IE和FF兼容问题详解 #### 一、引言 随着互联网技术的不断发展与普及,网页设计者们面临着越来越复杂的浏览器兼容性挑战。在众多浏览器中,Internet Explorer(简称IE)与Firefox因其庞大的用户基数而成为了...

    HTML在IE浏览器和FF浏览器中标签的使用

    3. **窗体尺寸**:IE通过document.body.offsetWidth和offsetHeight获取尺寸,FF则使用window.innerWidth和innerHeight以及document.documentElement.clientWidth和clientHeight。推荐使用document.body.clientWidth...

    Javascript下IE与Firefox下的差异兼容写法总结

    window.event对象差异 IE:有window.event对象 FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event) 获取鼠标当前坐标 IE:event.x和event.y。 FF:event.pageX和event...

    实现层透明,包含(IE6,7,8,9,FF)等

    - `#div2`同样使用了`filter`属性,同时还尝试使用了`rgba()`颜色模式,但注意这里的写法是错误的,正确的写法应该是在`background`属性中同时指定颜色和透明度。 #### jQuery实现层透明的具体步骤 1. **检测...

    精易模块[源码] V5.15

    9、修复“文本_转拼音”传入的参数变成全角的BUG,感谢易友【reloking】反馈。 10、修复“编码_Utf8到Unicode”频繁操作导致程序崩溃BUG,感谢易友【diablozxl】反馈。 11、修复“线程_等待”命令注释反的问题,返回...

    JavaScript兼容性总结之获取非行间样式案例

    这些浏览器提供了不同的方法来访问元素的计算样式,包括IE的currentStyle属性和Chrome/FF的getComputedStyle方法。此外,文档还展示了如何通过编写一个通用的函数来兼容不同的浏览器,并且给出了获取和设置元素样式...

    firefox事件处理之自动查找event的函数(用于onclick=foo())

    // 兼容IE和FF的写法 alert(arguments[0] || window.event); var evt = arguments[0] || window.event; var element = evt.srcElement || evt.target; alert(element.id); // 显示 "btn3" } ``` 当使用`...

    css(层叠样式表)规范文档

    全局样式通常包括字体大小、颜色、通用标签样式等,这些样式应统一放在名为 `global.css` 的文件中。 **2. 局部页面样式** 对于特定页面或频道的样式,建议使用如下格式命名:`private_栏目名.css`。例如,首页的...

    网页特效代码 右键菜单的制作![精华]

    例如,使用`document.all`的写法仅适用于Internet Explorer,而现代浏览器则需要采用更通用的方法。 #### 安全性 - **禁用默认上下文菜单**:为了避免安全风险,可以在用户点击右键时阻止浏览器的默认行为。 - **...

    event对象的方法 兼容多浏览器

    // 同时兼容IE和FF的写法 if (document.all) { // 检查是否为IE return window.event; } var func = getEvent.caller; // 获取调用getEvent的函数 while (func != null) { var arg0 = func.arguments[0]; /...

Global site tag (gtag.js) - Google Analytics