浏览器兼容性解决之道

前言

浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是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,抢占了$的原因。解决方案如下:

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.非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 。

3.总结

以上两方案实际上都是使用了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内核,打开网页的速度一般,安全性一般,但兼容性极高,界面简单,功能较少。

暂时搁置....欢迎能够解决此问题的朋友留言。

参考文献

1.http://www.cnblogs.com/ahl5esoft/p/3872597.html

2.http://blog.csdn.net/jumtre/article/details/50380311

3.http://www.jb51.net/article/52583.htm

4.http://www.jb51.net/article/45428.htm

美文美图

AngularJS进阶(三十五)浏览器兼容性解决之道的更多相关文章

  1. AngularJS进阶(三十七)IE浏览器兼容性后续

    IE浏览器兼容性后续 前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery.angularjs.IE的版本. 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js ...

  2. Python进阶(三十五)-Fiddler命令行和HTTP断点调试

    Python进阶(三十五)-Fiddler命令行和HTTP断点调试 一. Fiddler内置命令   上一节(使用Fiddler进行抓包分析)中,介绍到,在web session(与我们通常所说的se ...

  3. Java进阶(三十五)java int与integer的区别

    Java进阶(三十五)java int与Integer的区别 前言 int与Integer的区别从大的方面来说就是基本数据类型与其包装类的区别: int 是基本类型,直接存数值,而Integer是对象 ...

  4. AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

  5. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

  6. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  7. AngularJS进阶(三十四)Angular数据更新不及时问题探讨

    Angular数据更新不及时问题探讨 前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题.传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染.根据< ...

  8. 网站开发进阶(三十五)JSP页面中的pageEncoding和contentType两种属性

    JSP页面中的pageEncoding和contentType两种属性 本文介绍了在JSP页面中经常用的两种属性,分别是pageEncoding和contentType,希望对你有帮助,一起来看. 关 ...

  9. AngularJS进阶(三十八)上拉加载问题解决方法

    AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...

随机推荐

  1. 1. 两数之和 LeetCode

    给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [, , , ], target = 因为 n ...

  2. Docker如何获取镜像

    可以使用 docker pull 命令来从仓库获取所需要的镜像. 下面的例子将从 Docker Hub 仓库下载一个 Ubuntu 12.04 操作系统的镜像. $ sudo docker pull ...

  3. Gradle 1.12用户指南翻译——第四十八章. Wrapper 插件

    本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  4. 六星经典CSAPP-笔记(11)网络编程

    六星经典CSAPP-笔记(11)网络编程 参照<深入理解计算机系统>简单学习了下Unix/Linux的网络编程基础知识,进一步深入学习Linux网络编程和TCP/IP协议还得参考Steve ...

  5. Dynamics CRM2016 在实体命名时需要注意的事项

    在使用web api的过程中遇到个很无语的设置,体现在对实体名的设置上,之前看到accounts以为只是在实体名上加个s,也没往深处看,但真正进入项目实施了问题就来了,city直接变成了cities不 ...

  6. Zookeeper的安装配置及基本开发

    一.简介 Zookeeper 是分布式服务框架,主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置项的管理等等. ZooKeeper的目标就 ...

  7. Compass 更智能的搜索引擎(3)--高亮,排序,过滤以及各种搜索

    要想使得一个搜索系统更加的完美,查询精确度和页面显示算是其中比较重要的两个方面.今天,我们就来谈谈怎么使得我们的搜索系统更加的完美. 关于分词 下载地址 配置 关于高亮 关于排序 原理 冗余字段 使用 ...

  8. Gazebo機器人仿真學習探索筆記(七)连接ROS

    中文稍后补充,先上官方原版教程.ROS Kinetic 搭配 Gazebo 7 附件----官方教程 Tutorial: ROS integration overview As of Gazebo 1 ...

  9. python 反人类函数式编程模拟while和if控制流

    比如下面这个简单明了的命令式程序,它不断捕捉用户输入的内容,然后对其求和.直到用户输入一个以'0'开头的字符串,停止捕捉. while 1: line = input() ': print(sum(m ...

  10. 23 服务的绑定启动Demo3

    MainActivity.java package com.example.day23_service_demo3; import com.example.day23_service_demo3.My ...