Javascript不同浏览器差异及兼容方法

原文链接:http://caibaojian.com/js-ie-different-from-firefox.html

javascript的各种兼容就是为了解决不同浏览器的差异性,了解其中的差异能够帮助你更快的解决问题,提高代码的使用质量,编写更优秀的javascript代码。

1.window.event

表示当前的时间对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象

2.获取事件源

IE用srcElement获取事件源,而FF用target获取事件源

以上两个兼容通常会这么写:

var evt = e||event;

var el = evt.srcTarget || evt.srcElement;

3.添加、去除事件

4.获取标签的自定义属性

IE:div1.value或div1[‘value‘]

FF:可用div1.getAttribute("value")

5.document.getElemntByName()和document.all[name]

IE不可以,

FF可以

6.input.type的属性

7.IE支持innerText、outerHTML

FF:支持textContent

8.窗口的位置

IE、chrome、safari:支持使用window.screenLeft和window.screenTop

IE8以上、chrome、safari、firefox:支持使用window.screenX和window.screenY

兼容代码可以使用下面这段代码:

var leftX = typeof window.screenLeft == ‘number‘ ? window.screenLeft : window.screenX;

ver topY = typeof window.screenTop == ‘number‘ ? window.screenTop : window.screenY;

9.窗口的大小

firefox、chrome、IE9和safari:window.innerWidth和window.innerHeight

IE系列:document.body.clientWidth和document.body.clientHeight

不是IE6:document.documentElement.clientWidth和document.documentElement.clientHeight

兼容代码可以这样子写

//code from http://caibaojian.com/js-ie-different-from-firefox.html
var width = window.innerWidth;

var height = window.innerHeight;

if(typeof width != ‘number‘){

if(document.compatMode == ‘CSS1Compat‘){

width = document.documentElement.clientWidth;

height = document.docuementElement.clientHeight;

}else{

width = document.body.clientWidth;

height = document.body.clientHeight;

}

以上内容参考网络,由于本人学习的javascript知识还比较少,暂时不认识,所以提前学习,以便以后遇到能够快速的识别。这篇文章后面将会继续更新添加。

时间: 2024-07-31 15:04:25

Javascript不同浏览器差异及兼容方法的相关文章

巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozilla Developer Networks改版设计的过程中,我发现使用CSS媒体查询(media queries)虽然非常的有效,但有时,JavaScript却不能及时知道用户浏览设备的状态.浏览网站的用户使用的是桌面电脑,还是平板,还是手机?这对于CSS来说很容易,但CSS却无法将这些信息告诉Jav

Javascript常见浏览器兼容问题

常见浏览器原生javascript兼容性问题主要分为以下几类: 一.Dom 1.获取HTML元素,兼容所有浏览器方法:document.getElementById("id")以Id来获取元素; document.getElementsByTagName(“tag”)[0]以标签名来获取元素.另外IE不支持document.getElementsByClassName("class"); 2.获取Form表单元素 只兼容IE:document.formname.it

JavaScript,一个超级简单的方法判断浏览器的内核前缀

先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写JavaScript的行内样式就可以判断. 大家应该还记得JavaScript行内样式怎么写吧?(看来我是废话了!) 在前端开发过程中,有时我们需要判断浏览器的内核前缀,对不同的浏览器做出不同的处理,因此我们可以这么做. alert(element.style.webkitTransition); 这个是获取以webkit为前缀的transition值.但如果不是webkit为前缀的浏览器,则会返回un

封装常用的Javascript跨浏览器方法

var EventUntil={ // 跨浏览器的添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent('on'+type,handler); }else{ element['on'+type]=ha

JavaScript基础——浏览器对象模型(BOM)

简介 ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关.多年来,缺少事实上的规范导致BOM及有意思又有问题,因为浏览器提供商会按照各自的想法随意去扩展它.于是,浏览器之间公有的对象就成为了事实上的标准.这些对象在浏览器中得以存在,很大程度上是由于它们提供了与浏览器的互操作性.W3C为了把浏览器中JavaScript最基本的部分标准化

各个浏览器之间的兼容问题

各个浏览器之间的兼容性问题,同样的HTML5和CSS5样式,但是浏览器表现的效果不一样.一,什么兼容性问题,不正常的原因是什么?,应该怎么样让浏览器显示正常.二,为什么浏览器会存在兼容性的问题?1,同一个浏览器,版本越老存在的bug越多,越新的版本,对新标签和新的属性,新的特性支持越少.2,不同的浏览器,核心技术不一样,标准不同,实现的方式也有差异,最终的效果也有差异.三,处理兼容性问题的思路one,要不要做?1,从产品的角度,(产品的受欢迎程度,受欢迎浏览器的比例,效果优先还是基本功能优先?)

JavaScript判断浏览器类型及版本

说明:以下内容参考了一些网上资料以及同事间的一些讨论. 浏览器对于我们来说,可能是最熟悉的工具了.记得最早那会Netscape,到后来的Internet Explorer一统江湖,再到现在的FireFox大行其道,浏览器市场的争夺,可谓是硝烟弥漫.除了我们常见的IE, Firefox, Opera, Safari四大金刚以外,新近又出了一位Chrome,虽然新出,但是出于Google这个名门,Chrome所受到的关注绝不亚于先前的四大金刚,看来以后要改为5朵金花了,呵呵.除了这些熟知的浏览器以外

javascript中最最最常用的方法封装

javascript 常用方法的封装,小编持续升级中... 方法封装(js原生): 一.Object 类型 MHQ.ajaxUtils 定义一个ajax工具类 ajax 定义一个ajax工具函数 get 方法 post 方法 MHQ.elementUtils DOM元素工具类 replaceClassName 替换字符串,设置className属性 getInnerText 获取DOM元素内部文本的兼容方法 setInnerText 设置DOM元素内部文本的兼容方法 getNextElement

css在各浏览器中的兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容