IE ブラウザと JavaScript の AngularJS_AngularJS の互換性をテストする-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

IE ブラウザと JavaScript の AngularJS_AngularJS の互換性をテストする

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:53 PM

ie javascript

ショートバージョン

Angular アプリケーションが IE で動作できることを確認するには、次のことを確認してください。

1. IE7 以前の Polyfill JSON.stringify。ポリフィルには JSON2 または JSON3 を使用できます。

<!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. style="{{ someCss }}" の代わりに ng-style タグを使用します。それ以降のバージョンは Chrome および Firefox で動作しますが、IE バージョン 11 (執筆時点の最新バージョン) 以下では動作しません。

重要な部分は次のとおりです:

xmlns:ng- 名前空間 - カスタムタグごとに名前空間を指定する必要があります。

document.createElement(yourTagName) - カスタムタグ名を作成します。これは古いバージョンの IE でのみ問題となるため、読み込み条件を指定する必要があります。名前空間がなく、HTML で定義されていないタグはすべて、IE が認識できるように事前に宣言する必要があります。

バージョン情報

IE には、非標準のタグ要素に関する多くの問題があります。これらの問題は 2 つの大きなカテゴリに分類でき、それぞれに独自の解決策があります。

タグ名が 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 を解析する必要があります:

予期される動作は、BODY 要素にテキストを含む mytag 子要素があることです。

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

ログイン後にコピー

ただし、IE ではこれは当てはまりません (上記のリビジョンが含まれていない場合)

IE では、BODY 要素には 3 つの子要素があります:

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

ログイン後にコピー

1、自己終了する mytag。たとえば、自己終了タグ
です。 / はオプションですが、
タグは子要素を持つことができません。一部のテキストは
の兄弟タグとして扱われます。

2、テキストノードテキスト。上記では、これは兄弟タグ

ではなく、mytag の子要素である必要があります。

3. 破損した自己終了 /mytag。 / 文字は要素名に使用できないため、これは壊れた要素です。さらに、このサブクローズド要素は DOM の一部ではなく、DOM の構造を記述するためにのみ使用されます。

CSS スタイルのカスタムタグの名前付け

CSS セレクターがカスタム要素で確実に機能できるようにするには、XML 名前空間に関係なく、document.createElement('my-tag') を使用してカスタム要素の名前を事前に作成する必要があります。

<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ツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7612

CakePHP チュートリアル

1387

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

136

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：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.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 を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

win11でie11ブラウザが使えない場合はどうすればいいですか？ (win11ではIEブラウザは使用できません) Feb 10, 2024 am 10:30 AM

ますます多くのユーザーが win11 システムにアップグレードし始めています。各ユーザーの使用習慣が異なるため、多くのユーザーは依然として ie11 ブラウザーを使用しています。では、win11 システムで ie ブラウザーを使用できない場合はどうすればよいでしょうか? Windows11はIE11をまだサポートしていますか？解決策を見てみましょう。 win11でie11ブラウザが使えない問題の解決策 1. まず、スタートメニューを右クリックし、「コマンドプロンプト（管理者）」を選択して開きます。 2. 開いたら、「Netshwinsockreset」と直接入力し、Enter キーを押して確定します。 3. 確認後、「netshadvfirewallreset&rdqu」と入力します。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用