首頁 > web前端 > js教程 > 主體

測試IE瀏覽器對JavaScript的AngularJS的兼容性_AngularJS

WBOY
發布: 2016-05-16 15:53:47
原創
1086 人瀏覽過

短版

為確保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>
登入後複製

2. 在連接處將id="ng-app"加入根元素,使用ng-app屬性
 

<!doctype html>
 <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  ...
 </html>
登入後複製

3. 你不能使用自訂的元素標記,像(使用屬性版本

來代替),或

4. 如果你必需要用自訂元素標記,然後你必須採取以下步驟以確保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>
登入後複製

5. 使用ng-style標記來取代style="{{ someCss }}"。後續的版本能夠在Chrome和Firefox下工作但不能在IE版本<=11下工作(在撰寫本文時的最新版本)。


重要部分是:

  •     xmlns:ng- 命名空間- 你需要為每個自訂標籤指定一個命名空間。
  •     document.createElement(yourTagName)- 建立自訂標籤名稱 - 因為這只是舊版IE的問題,所以你需要指定載入條件。對於每一個沒有命名空間並且在HTML中沒有定義的標籤,你需要事先聲明以使得IE識別。

版本資訊

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

  •     如果標籤名稱以my:開頭那麼他會被當作XML命名空間並且必須有對應的命名空間宣告
  •     如果標籤沒有:符號但是不是標準HTML標籤,那麼必須事先使用document.createElement('my-tag')建立。
  •     如果你打算用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>
登入後複製

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!