IE兼容性开发的笔记
当前项目组开发的产品对外承诺支持IE9和IE11,但在推广应用过程中发现存在相当比例的用户实际上还在使用IE8。而这相当比例中的用户还包含了大部分的公司领导。为了满足公司内部各阶层人士体验我们产品的诉求,开发团队的上层领导经过协商,决定投入专门的精力来完毕IE8的支持。本文是笔记,记录了整改过程中发现、解决的一些问题。
IE兼容模式
简单的说,即是在jsp页面的头部添加例如以下的代码,指定浏览器以最高模式来呈现页面。对于我们项目组的产品来说。例如以下的代码能够保证IE8、IE9、IE11的用户在打开页面时,都能够得到最佳的体验。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
至于这行代码的详细含义,能够问度娘。相信会有惬意的答复。
假设没有这行代码。当前项目开发的jsp页面在IE8模式下打开时,会报一些稀奇古怪的、和jquery、JSON相关的错误,加上这行代码之后,这些错误就消失了。
字符串的trim方法
项目组内开发者在页面上大量应用到了字符串的trim方法,IE9及其以上版本号的IE浏览器都默认提供了trim方法,但IE8并没有提供,因此页面上使用trim方法的地方都会报js错。
解决方法比較简单,直接使用jquery提供的trim方法,比方"axdfa ".trim()替换为$.trim("axdfa "),问题就可以解决。
变量定义
页面上有一个div,id为xxxx,代码样比例如以下。
<div id="xxxxx"></div>
此时js代码中如出现例如以下的代码。而且xxxxx没有使用var来声明,那么js在运行到例如以下一行时会报错,提示信息是对象不支持此属性或方法。
xxxxx = 1;
这个问题初始发现时让我纠结了相当长时间。分析思路一度跑偏。以为是IE8的js引擎对于语法要求比較高,而IE9和IE11的语法要求比較低;但奇怪的是。网上并没有搜索到相关的话题,所以并不确定。后来经高手启示,并重复尝试之后。才发现当页面上存在前述场景时,IE8模式下js代码是一定会报错的。
明白了问题之后,改动方法就很明白了,要么改动div的id,要么使用变量前用var来显式初始化。
数组的遍历
对于数组var a = [1,2,4,],在IE8下。使用下标方式和jquery的each方法遍历数组时。会多遍历得到一个null对象;而使用IE9、IE11则不会存在这个问题。因此数组的最后一个元素之后切记不可添加“,”,否则会导致页面的js在IE8时出现诡异的表现。
数组的indexOf方法
IE8不支持数组的indexOf方法,为了满足在数组中查找对象的须要,代码中一般会为数组扩展indexOf方法。这引入一个问题,在使用foreach方式遍历数组时,indexOf方法也会作为数组的一个成员被遍历到,这比較讨厌;而使用下标方式和jquery的each方法来遍历数组。则不会引入这个问题。
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function () {
// ...
}
}
因此我个人建议是不要为数组提供indexOf方法的实现。直接使用jquery的inArray方法,也能够达到同样的效果。但须要注意的是inArray方法在使用时。被查询对象在前,数组对象在后。
欢迎訪问Jackie的家,http://jackieathome.sinaapp.com/,如需转载文章,请注明出处。
IE兼容性开发的笔记的更多相关文章
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- Rest API 开发 学习笔记(转)
Rest API 开发 学习笔记 概述 REST 从资源的角度来观察整个网络,分布在各处的资源由URI确定,而客户端的应用通过URI来获取资源的表示方式.获得这些表徵致使这些应用程序转变了其状态.随着 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- 驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址
驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址 最近重新看了乾龙_Heron的<ARM 上电启动及 Uboot 代码分析>(下简称<代码分析>) ...
- 驱动开发学习笔记. 0.06 嵌入式linux视频开发之预备知识
驱动开发读书笔记. 0.06 嵌入式linux视频开发之预备知识 由于毕业设计选择了嵌入式linux视频开发相关的项目,于是找了相关的资料,下面是一下预备知识 UVC : UVC,全称为:USB v ...
- 驱动开发学习笔记. 0.05 linux 2.6 platform device register 平台设备注册 2/2 共2篇
驱动开发读书笔记. 0.05 linux 2.6 platform device register 平台设备注册 2/2 共2篇 下面这段摘自 linux源码里面的文档 : 内核版本2.6.22Doc ...
- 驱动开发学习笔记. 0.04 linux 2.6 platform device register 平台设备注册 1/2 共2篇
驱动开发读书笔记. 0.04 linux 2.6 platform device register 平台设备注册 1/2 共2篇下面这段摘自 linux源码里面的文档 : Documentatio ...
- 驱动开发学习笔记. 0.02 基于EASYARM-IMX283 烧写uboot和linux系统
驱动开发读书笔记. 0.02 基于EASYARM-IMX283 怎么烧写自己裁剪的linux内核?(非所有arm9通用) 手上有一块tq2440,但是不知道什么原因,没有办法烧boot进norflas ...
- android开发学习笔记000
使用书籍:<疯狂android讲义>——李刚著,2011年7月出版 虽然现在已2014,可我挑来跳去,还是以这本书开始我的android之旅吧. “疯狂源自梦想,技术成就辉煌.” 让我这个 ...
随机推荐
- CMSIS-RTOS 信号量
信号量Semaphores 和信号类似,信号量也是一种同步多个线程的方式,简单来讲,信号量就是装有一些令牌的容器.当一个线程在执行过程中,就可能遇到一个系统调用来获取信号量令牌,如果这个信号量包含多个 ...
- Eclipse反编译插件 Enhanced Class Decompiler
因为jar包中的源码都是经过反编译的,所以需要安装插件才能查看到源码,此处介绍的是 Enhanced Class Decompiler 插件. 打开Eclipse,Help --> Eclips ...
- Spring-statemachine fork一个region后不能进入join状态的问题
Spring-statemachine版本:当前最新的1.2.3.RELEASE版本 发现fork多个Region时,子状态全部完成后能够进入join状态.但是如果fork一个Region时Regio ...
- struts2.x + Tiles2.x读取多个xml 配置文件
在web.xml中配置如下即可: <context-param> <param-name>org.apache.tiles.impl.BasicTilesContainer.D ...
- swift 动态设置UILabel的高度
import UIKit class ViewController3: UIViewController { override func viewDidLoad() { ...
- ReactNative之Flux框架的使用
概述 流程图 项目结构 View Components actions Dispatcher Stores 感谢 概述 React Native 能够说非常火,非常多bat的项目都在使用.不用发版就能 ...
- JNI学习积累之三 ---- 操作JNI函数以及复杂对象传递
本文原创,转载请注明出处:http://blog.csdn.NET/qinjuning 在掌握了JNI函数的使用和相关类型的映射后,以及知晓何利用javah工具生成对应的jni函数以及如何生成动态 链 ...
- java 返回json格式的数据
1 阿里巴巴的fastjson import com.alibaba.fastjson.JSON; 使用的时候 JSON.toJSON(list); 2 Gson 解析json数据 import c ...
- Android布局之LinearLayout
LinearLayout 1.核心属性 高度:layout_height (基于内容 wrap_content:基于父控件:) 宽度:layout_width 方向:orientation (纵 ...
- 编程里的API是什么意思?
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码 ...