JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)_javascript技巧
程序员文章站
2022-05-26 22:29:51
...
首先这里声明一下,关于我测试浏览器的版本是chrome15.0.874.121 Firefox 8.01 IE9 IETester
function getScroll(){
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;//滚动条的顶端
l = document.documentElement.scrollLeft;//滚动条的左端
w = document.documentElement.scrollWidth;//滚动条的宽度,也就是页面的宽度
h = document.documentElement.scrollHeight;//滚动条的高度
}
else
if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return {
t: t,
l: l,
w: w,
h: h
};
}
2:获得视图浏览器的宽度高度
function getPageWidth(){
var pageWidth = window.innerWidth;
if (typeof pageWindth != "number") {
if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
}
else {
pageWidth = document.body.clientWidth;
}
}
return pageWidth;
}
function getPageHeight(){
var pageHeight = window.innerHeight;
if (typeof pageWindth != "number") {
if (document.compatMode == "CSS1Compat") {
pageHeight = document.documentElement.clientHeight;
}
else {
pageHeight = document.body.clientHeight;
}
}
return pageHeight;
}
3:获得当前浏览器型号 名字
function(){
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
if (Sys.ie != null) {
return ("IE:" + Sys.ie);//判断IE浏览器及版本号
}
if (Sys.firefox != null) {
return ("firefox:" + Sys.firefox);//判断firefox浏览器及版本号
}
if (Sys.chrome != null) {
return ("chrome:" + Sys.chrome);//判断chrome浏览器及版本号
}
if (Sys.opera != null) {
return ("opera:" + Sys.opera);//判断opera浏览器及版本号
}
if (Sys.safari != null) {
return ("safari:" + Sys.safari);//判断safari浏览器及版本号
}
}
4:事件监听
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] = handler;
}
}
5:事件移除
function(element, type, handler){
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
else
if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
else {
element["on" + type] = null;
}
}
6:获得event,Firefox事件不断派发的时候,第一次事件会出现问题。
function(event){
event = (event ? event : window.event);
if (event == null) {
var $E = function(){
var c = $E.caller;
while (c.caller)
c = c.caller;
return c.arguments[0]
};
__defineGetter__("event", $E);
}
return event;
}
7:阻止默认事件
function(event){
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
}
8:不继续传播事件
function(event){
if (event.stopPropagation) {
event.stopPropagation();
}
else {
event.cancelBubble = true;
}
}
9:获得event的target
function(event){
return event.target || event.srcElement;
}
10:documen.doctype支持不一致
在IE中,结果变化了。
不好意思,他的结果又变化了。
function(item,myatt){
return item.attributes[myatt].value;
}
同样的话,设置属性应该知道怎么办吧,就是赋值呗。
function(item,myatt,value){
item.attributes[myatt].value=value;
}
13:元素的子节点个数
IE结果是3,其他浏览器是7。
这样大家的结果都是3了。
14:创立节点问题
//动态添加Element,所有的浏览器都可以实现
var newnode=document.createElement("input");
newnode.type="button";
newnode.value="sixth";
//在IE中可以还这么实现
var newnode= document.createElement("");
15:在屏蔽右键的时候,firefox与其他的不一样,在oncontextmenu事件中。
下面的代码关于声明
1:获得滚动条的情况
复制代码 代码如下:
function getScroll(){
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;//滚动条的顶端
l = document.documentElement.scrollLeft;//滚动条的左端
w = document.documentElement.scrollWidth;//滚动条的宽度,也就是页面的宽度
h = document.documentElement.scrollHeight;//滚动条的高度
}
else
if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return {
t: t,
l: l,
w: w,
h: h
};
}
2:获得视图浏览器的宽度高度
复制代码 代码如下:
function getPageWidth(){
var pageWidth = window.innerWidth;
if (typeof pageWindth != "number") {
if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
}
else {
pageWidth = document.body.clientWidth;
}
}
return pageWidth;
}
function getPageHeight(){
var pageHeight = window.innerHeight;
if (typeof pageWindth != "number") {
if (document.compatMode == "CSS1Compat") {
pageHeight = document.documentElement.clientHeight;
}
else {
pageHeight = document.body.clientHeight;
}
}
return pageHeight;
}
3:获得当前浏览器型号 名字
复制代码 代码如下:
function(){
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
if (Sys.ie != null) {
return ("IE:" + Sys.ie);//判断IE浏览器及版本号
}
if (Sys.firefox != null) {
return ("firefox:" + Sys.firefox);//判断firefox浏览器及版本号
}
if (Sys.chrome != null) {
return ("chrome:" + Sys.chrome);//判断chrome浏览器及版本号
}
if (Sys.opera != null) {
return ("opera:" + Sys.opera);//判断opera浏览器及版本号
}
if (Sys.safari != null) {
return ("safari:" + Sys.safari);//判断safari浏览器及版本号
}
}
4:事件监听
复制代码 代码如下:
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] = handler;
}
}
5:事件移除
复制代码 代码如下:
function(element, type, handler){
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
else
if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
else {
element["on" + type] = null;
}
}
6:获得event,Firefox事件不断派发的时候,第一次事件会出现问题。
复制代码 代码如下:
function(event){
event = (event ? event : window.event);
if (event == null) {
var $E = function(){
var c = $E.caller;
while (c.caller)
c = c.caller;
return c.arguments[0]
};
__defineGetter__("event", $E);
}
return event;
}
7:阻止默认事件
复制代码 代码如下:
function(event){
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
}
8:不继续传播事件
复制代码 代码如下:
function(event){
if (event.stopPropagation) {
event.stopPropagation();
}
else {
event.cancelBubble = true;
}
}
9:获得event的target
复制代码 代码如下:
function(event){
return event.target || event.srcElement;
}
10:documen.doctype支持不一致
E:如果存在文档类型说明,会将其错误的解释为一个注释并把它当做Comment节点,document.doctype的值始终是null。
Firefox:如果存在文档类型说明,则将其作为文档的第一个子节点,document.doctype是一个DocumentType节点,也可以通过firstChild或者childNodes[0]访问同一个节点。
Safari、Chrome、Opera:如果存在文档类型说明,则将其作为解释,但不作为文档的子节点,不会出现在childNodes中的。
11:查找元素
我有时候,我真搞不明白,IE总是在搞什么,总是想标新立异。如果系统不让自带浏览器的话,我敢说,IE的份额将会更少。
如果id和name一样的话,他也将被返回
复制代码 代码如下:
在IE中,结果变化了。
同样是IE,Id大小写不区分
复制代码 代码如下:
不好意思,他的结果又变化了。
12:如果是自定义属性的话,item.myattributs在非IE浏览器的情况下,是无法得出正确结果的。
复制代码 代码如下:
function(item,myatt){
return item.attributes[myatt].value;
}
同样的话,设置属性应该知道怎么办吧,就是赋值呗。
复制代码 代码如下:
function(item,myatt,value){
item.attributes[myatt].value=value;
}
13:元素的子节点个数
复制代码 代码如下:
- first
- second
- third
IE结果是3,其他浏览器是7。
Node之间的空白符,在其他浏览器是文本节点,结果就是7。如果变成这样,
复制代码 代码如下:
- first
- second
- third
这样大家的结果都是3了。
14:创立节点问题
复制代码 代码如下:
//动态添加Element,所有的浏览器都可以实现
var newnode=document.createElement("input");
newnode.type="button";
newnode.value="sixth";
//在IE中可以还这么实现
var newnode= document.createElement("");
15:在屏蔽右键的时候,firefox与其他的不一样,在oncontextmenu事件中。
16:还有动态添加style和script的时候,IE和其他的浏览器是不一样的。具体查查。
17:对于DOM2和DOM3,情况更复杂了。
上一篇: HTML5头像截取,给TP用的,服务器压力几乎为0
下一篇: 微信小程序开发购物车的实例代码
推荐阅读
-
关于火狐(firefox)及ie下event获取的两种方法_javascript技巧
-
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结_javascript技巧
-
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)_javascript技巧
-
IE与FireFox的JavaScript兼容问题解决办法_javascript技巧
-
IE及firefox下获取及设置样式值的代码_javascript技巧
-
JavaScript在IE和Firefox上的差异及相互替代的实现方法_javascript技巧
-
自制的文件上传JS控件可支持IE、chrome、firefox etc_javascript技巧
-
自制的文件上传JS控件可支持IE、chrome、firefox etc_javascript技巧
-
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)_javascript技巧
-
关于onchange事件在IE和FF下的表现及解决方法_javascript技巧