AngularJS的IE相容性【已翻譯100%】

青衫無名發表於2017-06-02
原文網址 : https://flycode.co/archives/140672
AngularJS

備註：AngularJS 1.3拋棄了對IE8的支援。可以在我們的部落格上了解更多內容。AngularJS 1.2將繼續支援IE8，但核心團隊已經不打算在解決IE8及之前版本的問題上花時間。

本文件介紹了網際網路瀏覽器（IE）在處理自定義HTML標籤及屬性時的特點。如果你正計劃在IE8或更早的瀏覽器上部署Angular應用請閱讀本文。

專案目前支援且將嘗試修復IE9以上的bug 。持續整合伺服器在IE9，IE10和IE11上執行所有的測試。詳細內容參加Travis CI及ci.angularjs.org。

我們不在IE8及之前的瀏覽器上執行測試。一些AngularJS的功能子集也許能夠在在這些瀏覽器上工作，但這將由你來測試並決定它在你的特定應用上是否工作。

短版本

為確保Angular應用在IE上能夠工作請確認：

  1. 在IE7或更早的版本上polyfill JSON.stringify。你可以使用JSON2或JSON3來polyfills。
<!doctype html>
  <html xmlns:ng="http://angularjs.org">
    <head>
      <!--[if lte IE 7]>
        <script src="/path/to/json2.js"></script>
      <![endif]-->
    </head>
    <body>
      ...
    </body>
  </html>
  1. 在連線處將id=”ng-app”新增到根元素，使用ng-app屬性
<!doctype html>
  <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
    ...
  </html>
  1. 你不能使用自定義的元素標記，像(使用屬性版本
    來代替)，或
  2. 如果你必需要用自定義元素標記，然後你必須採取以下步驟以確保IE8及之前版本都能用：
<!doctype html>
  <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
    <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>
  1. 使用ng-style標記來替代style=”{{ someCss }}”。後續的版本能夠在Chrome和Firefox下工作但不能在IE版本＜＝11下工作（在撰寫本文時的最新版本）。

重要部分是:

xmlns:ng- 名稱空間- 你需要為每一個自定義標籤指定一個名稱空間。

document.createElement(yourTagName)- 建立自定義標籤名 – 因為這只是對舊版本IE的問題，所以你需要指定載入條件。對於每一個沒有名稱空間並且在HTML中沒有定義的標籤，你需要提前宣告以使得IE識別。

版本資訊

IE對非標準的標籤元素有很多問題。這些問題可以歸為兩大類別，每一類別都有自己的解決辦法。

  • 如果標籤名以my：開頭那麼他會被當做XML名稱空間並且必須有對應的名稱空間宣告 xmlns:my=”ignored”>
  • 如果標籤沒有：符號但是不是標準HTML標籤，那麼必須提前使用document.createElement(`my-tag`)建立。
  • I如果你計劃用CSS選擇器改變自定義標籤的樣式，那麼不管有沒有名稱空間你都得提前用document.createElement(`my-tag`)建立.

好訊息

好訊息是這些限制僅僅適用於元素標記名稱並不適用於元素屬性名稱。因此，在IE中並不需要特別的處理：

如果我不這樣做，會發生什麼？

假如你使用HTML的未知標記mytag（my:tag或者my-tag結果是相同的）：

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

應該解析出如下的DOM：

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

預期的行為是BODY元素有一個mytag子元素，它帶有一些文字。

但是在IE中不是這樣的（如果沒有包含上面的修訂）

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

在IE中，BODY元素有三個子元素：

1，一個自關閉的mytag。例如自關閉標籤
。/是可選的，但是
標籤是不允許有子元素的，瀏覽器將
some text視為三個同輩的標籤，而some text並不是
的子元素。

2，一個文字節點some text。在上面這應該是mytag的子元素，而不是同輩標籤

3.一個損壞的自關閉的/mytag。這是一個損壞的元素因為元素名稱是不允許帶/字元的。另外，這種子關閉的元素並不是DOM的一部分，它僅僅是用於描述DOM的結構。

CSS風格的自定義標記命名
為確保CSS選擇器能夠在自定義元素上工作，自定義元素的名稱必須預先使用document.createElement(`my-tag`)建立，不需顧慮XML的名稱空間。

<html xmlns:ng="needed for ng: namespace">
    <head>
      <!--[if lte IE 8]>
        <script>
          // 需要確認ng-include被正常解析
          document.createElement(`ng-include`);

          // 需求啟用CSS引用
          document.createElement(`ng:view`);
        </script>
      <![endif]-->
      <style>
        ng:view {
          display: block;
          border: 1px solid red;
        }

        ng-include {
          display: block;
          border: 1px solid blue;
        }
      </style>
    </head>
    <body>
      <ng:view></ng:view>
      <ng-include></ng-include>
      ...
    </body>
  </html>


相關文章