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

推薦する

Vue3 ドキュメント クイックスタート

目次1. セットアップ1. セットアップ関数の最初のパラメータ - props 2. 文脈2. セッ...

JSONデータをHTMLで表示する方法

背景:場合によっては、json データをページに直接表示する必要があります (たとえば、インターフェ...

Linux の crw、brw、lrw などのファイル属性は何ですか?

ファイルとは何ですか?すべてのファイルは実際には文字列のストリームですが、適切な解析方法を使用すると...

CSS でベジェ曲線の実装を反転する方法

まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスム...

MySQL binlog の使用方法の詳細な説明

binlog は、MySQL のすべての DML 操作を記録するバイナリ ログ ファイルです。 bi...

CentOS 8が利用可能になりました

CentOS 8 が利用可能になりました! CentOS 8 と RedHat Enterprise...

MySQL シリーズ 6 のユーザーと認証

目次チュートリアルシリーズ1. ユーザー管理1. ユーザーアカウント2. アカウントの追加と削除3....

Alibaba Cloud Ubuntu 16.04 が IPSec サービスを構築

IPSec の概要IPSec (インターネット プロトコル セキュリティ): ネットワーク層と適用さ...

jQuery カスタム虫眼鏡効果

この記事の例では、jQueryのカスタム虫眼鏡効果の具体的なコードを参考までに共有しています。具体的...

dockerにmysqlをインストールした後にNavicatが接続できない問題に対する完璧な解決策

1. Dockerがイメージをプルするdocker pull mysql (デフォルトで最新バージョ...

MySQL MGR の利点は何ですか?

MGR (MySQL グループ レプリケーション) は、バージョン 5.7 で追加された新しい機能...

CSS フロート(float, clear)の人気の解説と体験談

私はかなり昔に CSS に触れましたが、フローティングについてはいつも混乱していました。私の理解が浅...

CSS を使用して小さな画像をプルダウンし、大きな画像と情報を表示する方法

今日は、Taobao、JD.comなどのショッピングモールでよく使われている、小さな画像の上にマウス...

Linux でスワップ領域を確認する 5 つのコマンドの概要

序文Linux では、スワップ パーティションとスワップ ファイルの 2 種類のスワップ領域を作成で...