IE6/7 における a.getAttribute(href,2) 問題の分析と解決

IE6/7 における a.getAttribute(href,2) 問題の分析と解決

簡単な説明<br />IE6および7では、一般的なaタグ(HTMLで記述され、DOM操作によってページに挿入されるaタグ)において、hrefの値が相対パスである場合、元のhrefの値はa.getAttribute("href")を介して直接取得されず、a.getAttribute("href",2)を介して取得されます。ただし、このaタグがinnerHTMLを介して挿入されている場合、a.getAttribute("href",2)を介しても元のhrefの値を取得できません。 innerHTML='<a href="/haha">test</a>' とすると、IE6,7 ではそれに対する互換処理が行われ、何らかの追加が行われると予測されます。このとき、outerHTML を通して見ると、a の href がすでに完全なアドレスになっています -_-! img の src でも同様の状況が発生すると言われています。
ただ通り過ぎて...上記を読んでください...ナンセンスな話を始めましょう:
---------------------------------------------------------------------------------------------------------------------------------
当初の目標: href 属性が http:// で始まるかどうかを確認するシングルページ アプリケーション。はいの場合はジャンプを続行します。いいえの場合は、互換性のある pushState を通じて URL アドレスを変更し、ルートをトリガーします。
問題: IE6 および 7 をテストしたところ、正しくインターセプトできないことが判明しました...
解決策: Sister Gu に問い合わせたところ、IE6 と 7 には getAttribute の 2 番目のパラメータがあることを知りました。これを 2 に設定すると、元の属性値が取得されます。紹介リンクは以下の通りです。
http://msdn.microsoft.com/en-us/library/ie/ms536429%28v=vs.85%29.aspx
これを見て、密かに嬉しくなり、すぐにコードを1行追加しました...テストするためにCtrl+F5を押した後...すぐに動作しなくなりました...なぜ動作しないのでしょうか? !分かりません…
この時点では、友人とチャットをしていました... どこで話が逸れたのかはわかりません... 最後に、フランクに尋ねたところ、コード内の他の干渉を排除し、次のコードでテストしました。

コードをコピー
コードは次のとおりです。

<!doctypehtml>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>テスト</title>
</head>
<本文>
<a id="a" href="" onclick=".getAttribute(\"href\",2)">テスト</a>
</本文>
</html>

IE6 または 7 でクリックすると、大きな「/haha」がポップアップ表示されます。 ! !何か他のことが起こっているのではないかと疑い始めました。このとき、a タグがどのようにして (文字列ベースの js テンプレート、innerHTML) 取得されるのかを考えました...そこで、次のコードでシミュレートしました。

コードをコピー
コードは次のとおりです。

<!doctypehtml>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>テスト</title>
</head>
<本文>
<div id="test"></div>
<スクリプト>
document.getElementById("test").innerHTML = '<a id="a" href="/haha" onclick="alert(this.getAttribute(\'href\',2));return false;">テスト</a>';
</スクリプト>
</本文>
</html>

再度テストしました...妹の...問題が再発しました!実際のテストでは、を生成した後、再度 a に対して setAttribute("href","/haha",2) を実行し、次に getAttribute("href",2) を実行すると、"/haha" が返されます。でも、こういうことをテンプレートでやるのは、あまりにも気持ち悪いので、きっぱり諦めましょう!フランクのアドバイスに耳を傾けた方が良いでしょう... 2 つのリンク要素を識別する属性を追加するだけで、行き詰まらないようにしましょう。
もう一度ドリル-_-!:

コードをコピー
コードは次のとおりです。

<!doctypehtml>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>テスト</title>
</head>
<本文>
<div id="test"></div>
<スクリプト>
var テスト = document.getElementById("テスト");
var a = document.createElement("a");
var txt = document.createTextNode("テスト");
a.href="/はは";
a.onclick=関数() {
alert(this.getAttribute('href',2));//"/はは"
false を返します。
};
txt を追加します。
テストします。
</スクリプト>
</本文>
</html>

最後に、innerHTML を通じてノードを挿入する場合、IE6 と 7 は正しいと判断する「エラー許容」処理を実行するのではないかと思います...そして、私は間違っていました...

<<:  IDEA が Docker を統合してリモート展開を実現するための手順

>>:  MySQL の undo、redo、binlog の違いを簡単に分析します

推薦する

MySQLのパフォーマンスが突然低下する理由

場合によっては、SQL ステートメントが通常どおり、非常に速く実行される状況に遭遇することがあります...

TypeScript におけるジェネリックケースの詳細な説明

ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...

HTML でよく使用されるエスケープ文字の概要

HTML でよく使用されるエスケープ文字をまとめると次のようになります。 &nbsp; 改行...

理論: 2年間のユーザーエクスペリエンス

<br />国内のウェブサイトが本格的に普及し、ユーザーエクスペリエンスに重点が置かれる...

JSに関する7つの面接の質問、あなたはいくつ正しく答えられますか

序文JavaScript では、これは関数呼び出しコンテキストです。この動作が非常に複雑であるからこ...

Zabbix 監視 Docker アプリケーション構成

コンテナの応用はますます一般的になっていますが、大量のコンテナをどのように管理すればよいのでしょうか...

React useMemo と useCallback の使用シナリオ

目次メモを使うコールバックの使用メモを使う親コンポーネントが再レンダリングされると、そのすべての要素...

フォームを送信した後、別のファイルに移動する

<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...

Docker Swarmを使用してWordPressを構築する方法

原因かつて私は Vultr に WordPress を設定しましたが、よく知られている理由により、こ...

Docker で SVN サーバーを構築するチュートリアル

SVN は Subversion の略称で、ブランチ管理システムを使用して効率的に管理するオープンソ...

Windows 環境での MYSQL5.7 設定ファイルの場所のグラフィカル分析

1. MYSQLインストールディレクトリ次のようにコードをコピーします。 select @@bas...

ウェブページの HTML コード: スクロールテキストの作成

このセクションでは、Web ページ内のテキストをスクロールしたり、スクロール プロパティを制御できる...

MySQL サーバー 5.5 の接続失敗の解決策

mysqlに接続できない問題の解決方法を参考までに紹介します。具体的な内容は以下のとおりです。昨日は...

JavaScriptを使用してページ効果を作成する

11. JavaScriptを使用してページ効果を作成する11.1 DOMプログラミングDOM プロ...

IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決策

この記事では、主に、IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決...