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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:53 PM

ie javascript

短版

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7532

CakePHP 教程

1379

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

win11無法使用ie11瀏覽器怎麼辦？ (win11用不了ie瀏覽器) Feb 10, 2024 am 10:30 AM

越來越多的用戶開始升級win11系統，由於每個用戶的使用習慣不同，還是有不少用戶在使用ie11瀏覽器，那麼win11系統用不了ie瀏覽器，該怎麼辦呢？ windows11還支援ie11嗎？下面就來看看解決方法。 win11無法使用ie11瀏覽器的解決方法1、先右鍵開始選單，選擇「命令提示字元（管理員）」開啟。 2.開啟之後，直接輸入“Netshwinsockreset”，回車確定。 3.確定之後再輸入「netshadvfirewallreset&rdqu

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

See all articles

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題