当前位置：首页 → 问答吧 → 彻底做到多版本浏览器兼容不容易

彻底做到多版本浏览器兼容不容易

时间：2010-05-16

来源：互联网

今天在家做一个项目,客户要求比较高,其中一个数组的显示与隐藏的js函数搞了大半天，终于解决了。现在把这个问题总结出来，写个小文，希望经典会员在碰到类似的问题时能迎刃而解。其实控制元素的dispaly样式，是很容易的，开始我用的是数组控制。
比如代码如下
<ul>
<li>数组一</li>
<li>数组二</li>
<li>数组三</li>
<li>数组四</li>
<li>数组五</li>
</ul>
我就会习惯在元素<ul>上定一个id名，然后在用方括号和数字来抓取对应的<li>元素，例如nav［０］。这表明我在<ul>元素上定了一个id为nav的名，并抓取的第一<li>元素。在ＩＥ所有版本浏览器中这样的写法都是成立的（已测ＩＥ６－８），但是偏偏firefox和safari是不识别这样写的，奇怪的是firefox和safari对数组的识别竟然是奇数的形式。也就是说，顺着从上往下的<li>元素数下来，ＩＥ是识别的0,1,,2,3,4，而firefox和safari识别的是1,3,5,7,9.真是喜欢和ＩＥ对着干。从理解上来看我觉得ＩＥ对数组的识别是比较人性化的，无奈firefox和safari就是不卖账。没有办法，我就写了一个支持firefox的js已保证浏览器的兼容。好象也很容易，就是把数字一改就ＯＫ了，但是判断浏览器的js又难到一下。还好用百度找到了判断浏览器的js

<script type="text/javascript">
      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) document.write('IE: ' + Sys.ie);
      if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
      if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
      if (Sys.opera) document.write('Opera: ' + Sys.opera);
      if (Sys.safari) document.write('Safari: ' + Sys.safari);
</script>
而后我用setAttribute的方法针对不同的浏览器做了不同的js调用，在需要动态加载的<script>标签上定一个id名为"ie",  然后用document.getElementById方法抓取这个script元素动态加载不同的js。例如if (Sys.ie){ie.setAttribute('src','fastnav.js')};依次我也把firefox和safari的判断写好。在ＩＥ和safari测试，一切正常，狂笑几声后发现在firefox一动不动的。一点反应都没有，这时才想起setAttribute在firefox里的作用是很有限的。最后的解决办法是

if (Sys.firefox){
              　　　　　　　　　var oldIE=document.getElementById('ie');
            if(oldIE) oldIE.parentNode.removeChild(oldIE);

            var t=document.createElement('script');
            t.src='ffnav.js';
            t.type='text/javascript';
            t.id="ie";
            document.getElementsByTagName('head')[0].appendChild(t);

            //document.getElementById("thejs").src="a.js";

      };
动态创建一个script元素然后加载针对ＦＦ和safari  的js,最后测试在IE,FF和safari测试通过。Chrome，opera我机器没装，也从来不测，所以没管。浏览器市场之争就是这样乱，很多人问过我这么多浏览器都是免费下载使用的，开发浏览器的厂商靠什么赚钱呢？但我想，归根揭底还是个利益之争。苦了我们这些做前端的。

[ 本帖最后由 sunritz 于 2010-5-16 15:14 编辑 ]

作者: sunritz 发布时间: 2010-05-16

实在是好苦好苦

作者: auror 发布时间: 2010-05-16

个人觉得搞好 IE7 和 FF就可以了，GOOGLE的和FF好像很一致

作者: QQ379699897 发布时间: 2010-05-16