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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:53 PM

iejavascript

短版

為確保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>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。