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,抢占了$的原因。解决方案如下:
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进阶(三十五)浏览器兼容性解决之道的更多相关文章
- AngularJS进阶(三十七)IE浏览器兼容性后续
IE浏览器兼容性后续 前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery.angularjs.IE的版本. 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js ...
- Python进阶(三十五)-Fiddler命令行和HTTP断点调试
Python进阶(三十五)-Fiddler命令行和HTTP断点调试 一. Fiddler内置命令 上一节(使用Fiddler进行抓包分析)中,介绍到,在web session(与我们通常所说的se ...
- Java进阶(三十五)java int与integer的区别
Java进阶(三十五)java int与Integer的区别 前言 int与Integer的区别从大的方面来说就是基本数据类型与其包装类的区别: int 是基本类型,直接存数值,而Integer是对象 ...
- AngularJS进阶(三十九)基于项目实战解析ng启动加载过程
基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...
- AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)
AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
- AngularJS进阶(三十四)Angular数据更新不及时问题探讨
Angular数据更新不及时问题探讨 前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题.传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染.根据< ...
- 网站开发进阶(三十五)JSP页面中的pageEncoding和contentType两种属性
JSP页面中的pageEncoding和contentType两种属性 本文介绍了在JSP页面中经常用的两种属性,分别是pageEncoding和contentType,希望对你有帮助,一起来看. 关 ...
- AngularJS进阶(三十八)上拉加载问题解决方法
AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...
随机推荐
- 1. 两数之和 LeetCode
给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [, , , ], target = 因为 n ...
- Docker如何获取镜像
可以使用 docker pull 命令来从仓库获取所需要的镜像. 下面的例子将从 Docker Hub 仓库下载一个 Ubuntu 12.04 操作系统的镜像. $ sudo docker pull ...
- Gradle 1.12用户指南翻译——第四十八章. Wrapper 插件
本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- 六星经典CSAPP-笔记(11)网络编程
六星经典CSAPP-笔记(11)网络编程 参照<深入理解计算机系统>简单学习了下Unix/Linux的网络编程基础知识,进一步深入学习Linux网络编程和TCP/IP协议还得参考Steve ...
- Dynamics CRM2016 在实体命名时需要注意的事项
在使用web api的过程中遇到个很无语的设置,体现在对实体名的设置上,之前看到accounts以为只是在实体名上加个s,也没往深处看,但真正进入项目实施了问题就来了,city直接变成了cities不 ...
- Zookeeper的安装配置及基本开发
一.简介 Zookeeper 是分布式服务框架,主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置项的管理等等. ZooKeeper的目标就 ...
- Compass 更智能的搜索引擎(3)--高亮,排序,过滤以及各种搜索
要想使得一个搜索系统更加的完美,查询精确度和页面显示算是其中比较重要的两个方面.今天,我们就来谈谈怎么使得我们的搜索系统更加的完美. 关于分词 下载地址 配置 关于高亮 关于排序 原理 冗余字段 使用 ...
- Gazebo機器人仿真學習探索筆記(七)连接ROS
中文稍后补充,先上官方原版教程.ROS Kinetic 搭配 Gazebo 7 附件----官方教程 Tutorial: ROS integration overview As of Gazebo 1 ...
- python 反人类函数式编程模拟while和if控制流
比如下面这个简单明了的命令式程序,它不断捕捉用户输入的内容,然后对其求和.直到用户输入一个以'0'开头的字符串,停止捕捉. while 1: line = input() ': print(sum(m ...
- 23 服务的绑定启动Demo3
MainActivity.java package com.example.day23_service_demo3; import com.example.day23_service_demo3.My ...