js 浏览器兼容性问题

电玩女神 2021-06-24 13:58 647阅读 0赞

0、js原生对象 获取自定义属性值的问题：

在IE下，发现使用$("\#test")\[0\].test 可以获得值“abc”。但是在chrome下却得到undifine。

如下修改：$("\#test")\[0\].attributes\["test"\].nodeValue

**1、Event事件**

先看一段代码：

**Html代码  **

1. **<HTML>**

2. **<HEAD>**

3. **<TITLE>** New Document **</TITLE>**

4. **<script** type="text/javascript"**>**

5. function testEvent()\{

6.   var target = window.event.srcElement ;

7.   document.getElementById('result').innerHTML = target.tagName;

8. \}

9. **</script>**

10.**</HEAD>**

11.**<BODY>**

12.**<div** id="result"**></div>**

13.**<input** type="button" value="点我" onclick="javascript:testEvent()"**/>**

14.**</BODY>**

15.**</HTML>**

这段代码在IE浏览器下的效果是，点击按钮，页面上显示“input”。但是在FireFox下点击按钮则会报错：window.event isundefined。这是因为在FireFox下window.event只能在事件发生的现场使用，也就是说，event变量必须在方法调用处被传入。再看下面的代码。

**Html代码  **

1. **<HTML>**

2. **<HEAD>**

3. **<TITLE>** New Document **</TITLE>**

4. **<script** type="text/javascript"**>**

5. function testEvent(number,ev)\{

6.   var target = ev.srcElement || ev.target;

7.   document.getElementById('result').innerHTML = target.tagName+ number;

8. \}

9. **</script>**

10.**</HEAD>**

11.

12.**<BODY>**

13.**<div** id="result"**></div>**

14.**<input** type="button" value="点我" onclick="javascript:testEvent(20,event)"**/>**

15.**<script** type="text/javascript"**>**

16.//testEvent();

17.**</script>**

18.**</BODY>**

19.**</HTML>**

上面的代码在IE和FireFox下执行都能生效，且效果相同。上面的代码有几处需要注意：

1、传入调用方法的event变量一定要是“event”，其它字符不能代替。但是位置不限。

2、event变量的点击对象获取在IE和firefox下也是不同的。FireFoxe下使用 .target获取，IE则要使用.srcElement获取。

**其它兼容性问题**

1、IE中 event对象有x,y属性，没有pageX,pageY属性；FireFox中有pageX,pageY属性，没有x,y属性。

2、待续。。。。

**2、禁止选中：**

ie,chrome可能通过JS的onselectstart

例如

复制代码代码如下:

firefox可以通过CSS

复制代码代码如下:

\*\{

\-moz-user-select:none

**3、浏览器判断：**

jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。 如果要全面支持 IE，并混合使用 jQuery 1.9 和 2.0， 官方的解决方

<!--\[if lt IE 9\]

<!\[endif\]--

<!--\[if gte IE 9\]

<!\[endif\]--这样有利于在复杂情况下根据浏览器特性进行分别处理， 而不是简单的检测浏览器类型和版本。但目前很多旧程序的移植恐怕无法直接过渡为根据浏览器支持特性， 所以在网上找了一些能够直接替换的解决办法。

判断浏览器类型：

$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());

$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());

$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());

$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());   //判断是否为ie浏览器

等号后面的表达式返回的就是 true/false， 可以直接用来替换原来的$.browser.msie等。

检查是否为 IE6// Oldif ($.browser.msie && 7  $.browser.version) \{\}

// Newif ('undefined' ==typeof(document.body.style.maxHeight)) \{\}  //判断是否为ie6