AngularJs学习笔记--IE Compatibility 兼容老版本IE

时间 2019-11-08

标签 angularjs 学习笔记 compatibility 兼容版本栏目 AngularJS 繁體版

原文原文链接

Short Version（简述）html

　　为了让咱们的angular应用在IE上工做，请确保：git

　　1. 按需引入JSON.stringify（IE7或如下的都须要这玩意）。咱们可使用JSON2（https://github.com/douglascrockford/JSON-js）或者JSON3（http://bestiejs.github.com/json3/）。angularjs

　　2. 不要使用自定义标签，诸如<ng:view>（用属性版代替，如<div ng-view>）。若是仍是想使用，则请看第3点。github

　　3. 若是你确实想使用自定义标签，那么你必须作如下步骤，让老IE认识你的自定义标签。json

<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 - 命名空间 - 对于每个咱们计划使用的自定义标签，都须要有一个命名空间。app
document.createElement(“自定义标签名称”) - 自定义标签名称的建立 - 由于这是旧版IE一个问题，咱们须要经过IE判断注释（）来特殊处理。对于每个没有命名空间或者非HTML默认标签，都须要进行这种预约义，以让IE不会犯傻（例如没样式…）。less

Long Version（详情）测试

　　IE对于非标准HTML标签的处理会有问题。这大体能够氛围两类（有、无命名空间），每一类都有他本身的一个解决方式。this

若是标签名称以”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结构的边界。

6、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>