测试IE浏览器对JavaScript的AngularJS的兼容性


Posted in Javascript onJune 19, 2015

短版本

为确保Angular应用在IE上能够工作请确认:

1. 在IE7或更早的版本上polyfill JSON.stringify。你可以使用JSON2或JSON3来polyfills。
 

<!doctype html>
 <html xmlns:ng="http://angularjs.org">
  <head>
   <!--[if lte IE 7]>
    <script src="/path/to/json2.js"></script>
   <![endif]-->
  </head>
  <body>
   ...
  </body>
 </html>

2. 在连接处将id="ng-app"添加到根元素,使用ng-app属性
 

<!doctype html>
 <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  ...
 </html>

3. 你不能使用自定义的元素标记,像<ng:view>(使用属性版本<div ng-view>来代替),或

4. 如果你必需要用自定义元素标记,然后你必须采取以下步骤以确保IE8及之前版本都能用:
 

<!doctype html>
 <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  <head>
   <!--[if lte IE 8]>
    <script>
     document.createElement('ng-include');
     document.createElement('ng-pluralize');
     document.createElement('ng-view');
 
     // Optionally these for CSS
     document.createElement('ng:include');
     document.createElement('ng:pluralize');
     document.createElement('ng:view');
    </script>
   <![endif]-->
  </head>
  <body>
   ...
  </body>
 </html>

5. 使用ng-style标记来替代style="{{ someCss }}"。后续的版本能够在Chrome和Firefox下工作但不能在IE版本<=11下工作(在撰写本文时的最新版本)。

重要部分是:

  •     xmlns:ng- 命名空间- 你需要为每一个自定义标签指定一个命名空间。
  •     document.createElement(yourTagName)- 创建自定义标签名 - 因为这只是对旧版本IE的问题,所以你需要指定加载条件。对于每一个没有命名空间并且在HTML中没有定义的标签,你需要提前声明以使得IE识别。

版本信息

IE对非标准的标签元素有很多问题。这些问题可以归为两大类别,每一类别都有自己的解决办法。

  •     如果标签名以my:开头那么他会被当做XML命名空间并且必须有对应的命名空间声明<html xmlns:my="ignored">
  •     如果标签没有:符号但是不是标准HTML标签,那么必须提前使用document.createElement('my-tag')创建。
  •     如果你计划用CSS选择器改变自定义标签的样式,那么不管有没有命名空间你都得提前用document.createElement('my-tag')创建.

好消息

好消息是这些限制仅仅适用于元素标记名称并不适用于元素属性名称。因此,在IE中并不需要特别的处理:<div my-tag your:tag></div>
如果我不这样做,会发生什么?

假如你使用HTML的未知标记mytag(my:tag或者my-tag结果是相同的):

<html>
  <body>
   <mytag>some text</mytag>
  </body>
 </html>

 

应该解析出如下的DOM:
 

#document
 +- HTML
   +- BODY
    +- mytag
      +- #text: some text

预期的行为是BODY元素有一个mytag子元素,它带有一些文字。

但是在IE中不是这样的(如果没有包含上面的修订)
 

#document
 +- HTML
   +- BODY
    +- mytag
    +- #text: some text
    +- /mytag

在IE中,BODY元素有三个子元素:

1,一个自关闭的mytag。例如自关闭标签<br/>。/是可选的,但是<br>标签是不允许有子元素的,浏览器将<br>some text</br>视为三个同辈的标签,而some text并不是<br>的子元素。

2,一个文本节点some text。在上面这应该是mytag的子元素,而不是同辈标签

3.一个损坏的自关闭的/mytag。这是一个损坏的元素因为元素名称是不允许带/字符的。另外,这种子关闭的元素并不是DOM的一部分,它仅仅是用于描述DOM的结构。

CSS风格的自定义标记命名

为确保CSS选择器能够在自定义元素上工作,自定义元素的名称必须预先使用document.createElement('my-tag')创建,不需顾虑XML的命名空间。
 

<html xmlns:ng="needed for ng: namespace">
  <head>
   <!--[if lte IE 8]>
    <script>
     // 需要确认ng-include被正常解析
     document.createElement('ng-include');
 
     // 需求启用CSS引用
     document.createElement('ng:view');
    </script>
   <![endif]-->
   <style>
    ng\:view {
     display: block;
     border: 1px solid red;
    }
 
    ng-include {
     display: block;
     border: 1px solid blue;
    }
   </style>
  </head>
  <body>
   <ng:view></ng:view>
   <ng-include></ng-include>
   ...
  </body>
 </html>
Javascript 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
详解JS预解析原理
Jun 16 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 #Javascript
Backbone.js的Hello World程序实例
Jun 19 #Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 #Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 #Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 #Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 #Javascript
详细解读AngularJS中的表单验证编程
Jun 19 #Javascript
You might like
php生成动态验证码gif图片
2015/10/19 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
php array_map()函数实例用法
2021/03/03 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python入门_学会创建并调用函数的方法
2017/05/16 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python实现俄罗斯方块
2018/06/26 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
群众路线个人整改措施
2014/10/24 职场文书
工程项目合作意向书
2015/05/08 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript
Go语言怎么使用变长参数函数
2022/07/15 Golang