AngularJs學習筆記--IE Compatibility 兼容老版本IE


原版地址:http://docs.angularjs.org/guide/ie

 

Internet Explorer Compatibility

 

一、總括

  這文章描述Internet ExplorerIE)處理自定義HTML屬性、標簽的特性(可以理解為“特別糟糕的性質”)。如果我們打算讓應用兼容IE8以及以下的版本,那么可以繼續往下看。

 

二、Short Version(簡述)

  為了讓我們的angular應用在IE上工作,請確保:

  1. 按需引入JSON.stringifyIE7或以下的都需要這玩意)。我們可以使用JSON2https://github.com/douglascrockford/JSON-js)或者JSON3http://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>

 

By Lcllao.

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM