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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 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
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php格式化金额函数分享
2015/02/02 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
从零学Python之入门(四)运算
2014/05/27 Python
Python对象体系深入分析
2014/10/28 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
医药类个人求职的自我评价
2014/02/12 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python