测试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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
Javascript document.referrer判断访客来源网址
May 15 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
vue无限轮播插件代码实例
May 10 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 getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
python中set常用操作汇总
2016/06/30 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
十一个高级MySql面试题
2014/10/06 面试题
《鲁班和橹板》教学反思
2014/04/27 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
学校开除通知书
2015/04/25 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
python字符串的多行输出的实例详解
2021/06/08 Python
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技