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 の違いを簡単に分析します