js 浏览器兼容性问题

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

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

  1. IE下,发现使用$("\#test")\[0\].test 可以获得值“abc”。但是在chrome下却得到undifine
  2. 如下修改:$("\#test")\[0\].attributes\["test"\].nodeValue

1、Event事件

先看一段代码:

Html代码

  1. </strong> New Document <strong>

  2. <script type=”text/javascript”>

  3. function testEvent(){

  4. var target = window.event.srcElement ;

  5. document.getElementById(‘result’).innerHTML = target.tagName;

  6. }

10.

11.

12.<div id=”result”>

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

14.

15.

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

Html代码

  1. </strong> New Document <strong>

  2. <script type=”text/javascript”>

  3. function testEvent(number,ev){

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

  5. document.getElementById(‘result’).innerHTML = target.tagName+ number;

  6. }

10.

12.

13.<div id=”result”>

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

15.<script type=”text/javascript”>

16.//testEvent();

17.

18.

19.

上面的代码在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, 官方的解决方

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]

<script src=’jquery-1.9.0.js’</script

<![endif]—

<!—[if gte IE 9]

<script src=’jquery-2.0.0.js’</script

<![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

检查是否为 IE 6-8

if (!$.support.leadingWhitespace) {}

发表评论

表情:
评论列表 (有 0 条评论,758人围观)

还没有评论,来说两句吧...

相关阅读

    相关 浏览器兼容问题

    兼容性问题的由来 2001年微软发布了XP和IE6,在当时是世界上标准执行得最高的浏览器,并且有很多私有技术和容错技术,使得顶峰市场份额达到98%。于是骄傲的微软不理睬W3C

    相关 safari浏览器兼容问题

    今天写代码遇到的一个bug,在chrome上显示得好好的时间,一到Safari就提示 “invalid date”,于是回来看代码(为了一目了然,进行一些处理): v

    相关 浏览器兼容问题

    浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 解决方案:CSS

    相关 浏览器兼容问题

    1,浏览器兼容问题一:不同浏览器的标签默认的margin和padding不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大