写点什么

AngularJS 进阶 (三十五) 浏览器兼容性解决之道

  • 2022-12-09
    江苏
  • 本文字数:1904 字

    阅读完需:约 6 分钟

AngularJS进阶(三十五)浏览器兼容性解决之道

​一、前言

      浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是 IE。对绝大多数公司来说,兼容 IE6 的性价比已经很低,而 IE7 则几乎已经绝迹。所以,常见的兼容性下限是 IE8。这也正是 Angular1.2x 的兼容性目标,Angular 团队声明:Angular 的持续集成服务器会在 IE8 下运行所有的测试。但这些测试不会运行在 IE7 及以下版本,它们也不会保证 Angular 将会工作在这些 IE 版本上。

      而 1.3 以后的版本,Angular 官方不再保证对 IE8 的兼容。当然,这并不表示一定不能在 IE8 用,但是官方不在针对 IE8 对集成测试,如果确实需要在兼容 IE8 的同时使用 1.3,就需要自己做全面测试。不过,这样做的话性价比比较低。所以,在工程实践中,一般以 IE8 为分界,如果需要兼容,就用 1.2,否则就用 1.3+。

      在项目开发过程中,自己一直都是在 Chrome 浏览器中开发、调试服务端管理前台。后期测试阶段,Boss 提出要做到主流浏览器(例如:360 浏览器、qq 浏览器、IE)兼容。这个要求还是很合理的。经过测试 360、qq、UC、火狐等浏览器均不存在所谓的兼容性问题。最令人头大的就是 IE。不过,我坚信:是问题就可以得到解决。


测试环境:

Angular 版本 : angular-1.3.0.14

Jquery 版本  :jquery-1.9.1

浏览器版本    : IE10

二、解决方案

      初次尝试设置 IE10 的兼容性选项,无解。

      IE 不兼容问题是程序中调用 jquery,抢占了 $的原因。解决方案如下:

2.1 JQuery 方案

1.1 页面引入 jquery.js 库

<script src="jquery-1.7.1.js" type="text/javascript"></script>
复制代码


1.2 添加两个 js 函数

添加 LockTableHead()和 translate()函数。

注意:为防止 JQuery 与现有 js 框架抢夺 $标识符,要执行 jQuery.noConflict()。


function LockTableHead(divId, tableId) {var jq = jQuery.noConflict();    jq("#" + divId).scroll(function () {        var delta = jq("#" + divId).scrollTop();        if (delta > 0) {            translate(jq("#" + tableId +" th"), 0, delta - 2);        }        else {            translate(jq("#" + tableId + " th"), 0, 0);        }    });}function translate(element, x, y) {    var translation = "translate(" + x + "px," + y + "px)"     element.css({        "transform": translation,        "-ms-transform": translation,        "-webkit-transform": translation,        "-o-transform": translation,        "-moz-transform": translation    });}
复制代码


1.3 修改页面,调用 js

在适当的地方添加 LockTableHead()函数调用即可。如下:

<button onclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>
复制代码

注意:要提供一个 div 的 id 和 table 的 id 。

2.2 非 JQuery 方案(纯 js)

2.1 思路

受 JQuery 方案的启发,将它翻译回普通 js 即可。

2.2 添加 js 函数

添加 LockTableHead()函数。


function LockTableHead(divId, tableId) {document.getElementById(divId).onscroll = function () {var delta = document.getElementById(divId).scrollTop;var t1 = "translate(0px," + delta + "px)";th_Array=document.getElementById(tableId).getElementsByTagName("th");for (i = 0; i < th_Array.length; i++) {th_Array[i].style["-ms-transform"] = t1;}};}
复制代码


2.3 修改页面,调用 js

同上,在适当的地方添加 LockTableHead()函数调用即可。如下:

<button onclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>
复制代码

注意:要提供一个 div 的 id 和 table 的 id 。

三、总结

      以上两方案实际上都是使用了 css3 中的 translate 函数,这就意味着浏览器得支持这个功能是前提条件。

      另外,如果页面上只有一个 table,也可以通过 getElementsByTagName 的方式定位 table,并用 parentNode 的方式定位 div,这样就不必传递它们的 id 了。

      以上方法貌似只是解决浏览器局部兼容性问题。对于全面兼容不适用。

      IE 浏览器兼容性问题真的难倒自己了。始终找不到一个好的解决方案。错误提示如下:

  


      


      居然有个对象是没定义的?!

 


    Object.keys 方法是 ES5 中的函数。IE8 不支持。

      自己根据提示修改了 lodash.js 文件中的 L083,L229,将其进行了注释。并引入了 es5-shim.js 文件。

      是否需要考虑一下浏览器的内核?


      Google Chrome 是采用 Chrome 内核,基于开源内核 chromium。打开网页的速度快,且很安全,性能极佳,界面简洁,功能多,但兼容性有待提高。

      Internet Explorer 是采用 IE 内核,打开网页的速度一般,安全性一般,但兼容性极高,界面简单,功能较少。

发布于: 2022-12-09阅读数: 23
用户头像

No Silver Bullet 2021-07-09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
AngularJS进阶(三十五)浏览器兼容性解决之道_AngularJS_No Silver Bullet_InfoQ写作社区