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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。