`
vance_sunny
  • 浏览: 8522 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
最近访客 更多访客>>
社区版块
存档分类
最新评论

javascript兼容多种浏览器

阅读更多
随着以Firefox为代表的第三方浏览器的兴起,我们做的网站也不能再JUST IE了,如果把原来的一些Javascript代码放到IE以外的浏览器的话,往往都不能正常运行或出错,所以这里介绍一下怎么改进我们的JS,让它能更加规范,更加具有兼容性。

示例代码:
<body><table border="1" cellspacing="0" cellpadding="0" id="apple" > <tbody>
  <tr>     <td id="banana" style="color:red" >不吃苹果</td>  </tr>
</tbody></table></body>
尽量采用W3C DOM 的写法
以前访问对象可能是:
document.all.apple 或者 apple
现在应该采用:
document.getElementById("apple") 以ID来访问对象,且一个ID在页面中必须是唯一的
document.getElementsByTagName("div")[0] 以标签名来访问对象
原来设置对象的属性可能是:
document.all.apple.width=100 或 apple.width=100
现在应该采用:
document.getElementById("apple").setAttribute("width","100")
document.getElementsByTagName("div")[0].setAttribute("width","100")
访问对象的属性则采用:
document.getElementById("apple").getAttribute("width")
document.getElementsByTagName("div")[0].getAttribute("width")
W3C DOM在IE下的一些限制
因为起先的IE占据整个浏览器95%的份额,没有竞争压力,所以这位老大就硬是要玩点另类,不完全按WEB标准来搞。

在IE下不能正确使用setAttribute来设置对象的style、class以及事件响应属性,
因此我还得按原来的点记法来访问和设置,以达到兼容各种浏览器的效果,如:
document.getElementById("banana").class
document.getElementById("banana").style.color
document.getElementById("banana").onclick
document.getElementById("banana").class="fruit"
document.getElementById("banana").style.color="blue"
document.getElementById("banana").onclick= function (){alert("我是香蕉")}
关于Firefox下的onload问题
function over(){
alert("页面加载完毕")
}

正常情况下,我们赋与onload响应函数是:
document.body.onload= over
但是在Firefox下这样无法执行,
所以我们都都采用下面这种形式:
window.onload=over
关于IE下TABLE无法插入新行的问题
IE下TABLE无论是用innerHTML还是appendChild插入<tr>都没有效果,而其他浏览器却显示正常。解决他的方法是,将<tr>加到TABLE的<tbody>元素中,如下面所示:

var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_text = document.createTextNode("香蕉不吃苹果");
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName("tbody")[0].appendChild(row);
分享到:
评论

相关推荐

    .net模拟多选框兼容多种浏览器

    标题中的".net模拟多选框兼容多种浏览器",指的是使用.NET技术来编写一段代码,该代码能够在不同的浏览器环境下模拟复选框的行为,确保在IE、Firefox、Chrome、Safari等主流浏览器中都能正常工作。这段源码很可能...

    iframe自适应高度(兼容多种浏览器)

    ### iframe自适应高度(兼容多种浏览器) 在网页开发过程中,`iframe`是一种常用的元素,用于在当前页面中嵌入另一个HTML文档。然而,默认情况下,`iframe`的高度是固定的,这可能会导致内容显示不完全或者出现不必要...

    js 复制代码 兼容多种浏览器

    "js 复制代码 兼容多种浏览器"这个主题就聚焦于如何使用JavaScript来实现在不同浏览器上,包括IE、Firefox、Opera和Chrome,都能够稳定地复制文本到剪贴板。 首先,我们了解JavaScript的限制。在早期的浏览器中,...

    兼容多浏览器js 日历控件大全

    综上所述,"兼容多浏览器js 日历控件大全"的资源集合包含了一系列经过优化和测试的解决方案,可以帮助开发者在不牺牲用户体验的情况下,实现在多种浏览器环境下运行的日历控件。通过理解和应用上述技术,开发者可以...

    javascript实现软键盘输入,兼容多种浏览器,测试通过

    8. **测试与调试**:为了确保兼容性,需要在多种浏览器环境下进行测试,包括但不限于Chrome、Firefox、Safari、Edge以及搜狗浏览器的高速模式。利用开发者工具进行性能分析和错误排查。 综上所述,这个项目通过...

    Video播放器兼容各大浏览器

    5. **兼容性检测**:使用JavaScript库如Modernizr进行浏览器特性检测,可以帮助识别哪些功能是浏览器支持的,从而针对性地调整代码。 6. **Flash备用**:对于不支持HTML5 Video的老旧浏览器,可以提供Flash播放器...

    JavaScript 滑动标杆范围取值(兼容多种浏览器)

    结合HTML5的原生支持和自定义JavaScript实现,我们可以创建一个功能齐全、兼容多种浏览器的滑动标杆组件。`bound.html`可能是展示滑动标杆实际应用的示例代码,你可以打开查看并学习其具体实现。通过不断优化和测试...

    兼容多种浏览器的公告栏文字滚动效果js代码

    总结来说,实现兼容多种浏览器的公告栏文字滚动效果主要涉及JavaScript DOM操作、CSS动画以及浏览器兼容性处理。理解这些基础知识,结合实际的“MarqueeTop.html”文件,可以帮助开发者创建出更高效、更灵活的滚动...

    js大转盘兼容多种浏览器

    综上所述,创建一个兼容多种浏览器的JavaScript大转盘涉及到了HTML布局、CSS样式、jQuery动画以及兼容性处理等多个方面。通过合理的代码组织和技巧,我们可以创建一个既美观又实用的互动组件,为用户提供一致且愉快...

    适合统计用,兼容多种浏览器

    在IT领域,尤其是在网页开发中,"适合统计用,兼容多种浏览器"的描述通常意味着一个解决方案或技术设计能够提供有效的数据统计功能,并且能够在各种不同的网络浏览器上运行良好,包括但不限于Chrome、Firefox、...

    兼容多种浏览器的下拉式二级菜单

    总之,创建一个兼容多种浏览器的下拉式二级菜单需要综合运用HTML、CSS和JavaScript技术,并充分考虑浏览器兼容性和用户体验。通过合理的代码组织和优化,我们可以构建出既美观又实用的菜单系统,为用户提供便捷的...

    上传图片预览效果-兼容多种浏览器

    本文将深入探讨如何实现一个兼容多种浏览器的图片上传预览功能,并基于提供的文件"上传图片预览.html"进行解析。 首先,我们来理解这个功能的核心原理。在HTML5中,File API提供了处理用户选择的本地文件的能力,...

    30多种上下左右滚动代码兼容各种浏览器

    本文将详细讲解30多种上下左右滚动代码,这些代码经过优化,能够兼容各种主流浏览器,包括IE、Firefox、Chrome、Safari和Opera等。 一、连续滚动 连续滚动是最基础的滚动效果,它可以让文字或图片持续不断地从一侧...

    swfupload flash上传兼容所有浏览器

    总之,SWFUpload 是一个强大的文件上传解决方案,对于那些需要确保在多种浏览器环境下稳定运行的项目,它是一个值得考虑的选择。虽然现代的Web开发更倾向于使用HTML5的File API,但在过渡期间,SWFUpload 仍然是一个...

    能兼容多种浏览器,功能强大,界面美观的日历控件

    标题提到的“能兼容多种浏览器,功能强大,界面美观的日历控件”正是对理想日历控件的完美描述。 描述中提到,在/S系统中,日历控件的使用十分普遍。开发者经常面临的问题是,虽然网络上有大量的日历控件资源,但...

    javascript解决innerText浏览器兼容问题思路代码.docx

    为了应对这一挑战,开发者需要编写能够兼容多种浏览器的代码。 #### 解决方案 以下是一种常用的解决方案,它通过自定义函数 `text` 来获取元素的文本内容,同时确保在不同浏览器中的兼容性。 ```javascript ...

    兼容所有浏览器的样式写法

    浏览器兼容性是指网页设计或脚本代码能够在多种浏览器上正常运行的能力。不同浏览器对CSS的支持差异主要体现在以下方面: 1. **选择器支持**:如某些老版本浏览器可能不支持复杂的CSS3选择器。 2. **属性支持**:...

    兼容各种浏览器、屏蔽下拉框的遮照层

    同时,为了测试和调试,开发者会借助工具如BrowserStack或CrossBrowserTesting来模拟多种浏览器环境。 此外,为了实现更好的用户体验,遮照层可能还需要考虑交互细节,比如动画效果,比如渐显渐隐,以及无障碍性...

    js+超酷弹出层+兼容各大浏览器

    js+超酷弹出层+兼容各大浏览器,多种javascript的弹出层

    简单兼容各种浏览器的下拉菜单导航

    通过这些技术的结合,我们可以创建出一个不仅功能完整,而且在多种浏览器环境下都能良好运行的下拉菜单导航。在实际项目中,还应根据需求进行进一步的优化和定制,如响应式设计以适应不同设备的屏幕尺寸,或者添加更...

Global site tag (gtag.js) - Google Analytics