AngularJs IE Compatibility 兼容老版本IE


Posted in Javascript onSeptember 01, 2016

Internet Explorer Compatibility

一、总括

这文章描述Internet Explorer(IE)处理自定义HTML属性、标签的特性(可以理解为“特别糟糕的性质”)。如果我们打算让应用兼容IE8以及以下的版本,那么可以继续往下看。

二、Short Version(简述)

为了让我们的angular应用在IE上工作,请确保:

1. 按需引入JSON.stringify(IE7或以下的都需要这玩意)。我们可以使用JSON2(https://github.com/douglascrockford/JSON-js)或者JSON3(http://bestiejs.github.com/json3/)。

2. 不要使用自定义标签,诸如<ng:view>(用属性版代替,如<div ng-view>)。如果还是想使用,则请看第3点。

3. 如果你确实想使用自定义标签,那么你必须做以下步骤,让老IE认识你的自定义标签。

<html xmlns:ng="http://angularjs.org">
<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>

需要关注的是:

xmls:ng - 命名空间 - 对于每一个我们计划使用的自定义标签,都需要有一个命名空间。

document.createElement(“自定义标签名称”) - 自定义标签名称的创建 - 因为这是旧版IE一个问题,我们需要通过IE判断注释(<!--[if lte IE 8]>…<![endif]-->)来特殊处理。对于每一个没有命名空间或者非HTML默认标签,都需要进行这种预定义,以让IE不会犯傻(例如没样式…)。

三、Long Version(详情)

IE对于非标准HTML标签的处理会有问题。这大致可以氛围两类(有、无命名空间),每一类都有他自己的一个解决方式。

如果标签名称以”my:”开头的话,将被当作命名空间,必须要一个想对应的命名空间定义(<html xmlns:my=”ignored”>)。

如果标签没有命名空间(xx:开头),但并非一个标准的HTML的话,需要通过document.createElement(“标签名称”)进行声明。

如果我们打算对自定义标签定义样式的话,我们必须使用document.createElement(“标签名称”)来进行自定义,regardless of XML命名空间(实验证明,regardless of XML namespace意思很有可能是:不用管有命名空间的自定义标签)。

四、The Good News(好消息)

好消息是,这个限制仅仅是对于元素名称的,对属性名称没影响。所以不需要对自定义属性(<div> my-tag your:tag></div>)做特殊处理。

五、What happens if I fail to do this?(没做这些处理的话,会发生什么事呢?!)

假设我们有一个非标准的HTML标签(对于my:tag或者my-tag都有一样的结果。但测试过后,发现命名空间方式不会有这种烦恼)。

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

一般来说,将会转换为一下的DOM结构:

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

 

我们期望的,是BODY元素有一个mytag子元素,mytag又有一个文本子元素”some text”。

但IE不是这么干的(如果做了纠正措施,则不包括在内)!

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

 

在IE里面,BODY将会有3个孩子元素:

1. 一个自闭合的” mytag”,与<br/>类似。末尾的“/”是可选的,但<br>标签不允许有任何子元素,所以浏览器将其分为<br>、some text、</br>三个兄弟元素,而不是单独的<br>元素中含有some text元素。

2. 一个文本节点“some text”。这本来应该是mytag元素的子节点,不是它的兄弟节点。

3. 一个错误的自闭合标签” /mytag”,说它错误,是因为元素名称不允许含有”/”字符(在最后应该是允许的<br/>)。此外,闭合元素不应该是DOM的一部分(不应该以元素形式出现),因为它只用作勾画DOM结构的边界。

六、CSS Styling of Custom Tag Names(对自定义标签进行CSS样式定义)

如果想让CSS选择器对自定义元素有效,那么自定义元素必须通过document.createElement(“元素名称”)进行预定义,regardless of XML namespace(实验证明,这里是不用管有XML命名空间的?!)

这里是自定义标签样式定义的例子:

<!DOCTYPE html>
<html xmlns:ng="needed for ng: namespace">
<head>
  <title>IE Compatbility</title>
  <!--[if lte IE 8]>
  <script>
    // needed to make ng-include parse properly
    document.createElement('ng-include');

    // needed to enable CSS reference
    document.createElement('ng:view');//注释掉也可以?!
  </script>
  <![endif]-->
  <style>
    ng\:view {
      display: block;
      border: 1px solid red;
      width:100px;
      height:100px;
    }

    ng-include {
      display: block;
      border: 1px solid blue;
      width:100px;
      height:100px;
    }
  </style>
</head>
<body>
  <ng:view></ng:view>
  <ng-include></ng-include>
</body>
</html>
Javascript 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 #Javascript
AngularJs Forms详解及简单示例
Sep 01 #Javascript
vue.js入门教程之计算属性
Sep 01 #Javascript
AngularJs expression详解及简单示例
Sep 01 #Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 #Javascript
vue.js入门教程之基础语法小结
Sep 01 #Javascript
AngularJs directive详解及示例代码
Sep 01 #Javascript
You might like
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
python人民币小写转大写辅助工具
2018/06/20 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
分享一个python的aes加密代码
2020/12/22 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
C#笔试题
2015/07/14 面试题
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
家长对孩子评语
2014/01/30 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
亲戚关系证明
2015/06/24 职场文书
好人好事新闻稿
2015/07/17 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS