HTML では、一般的な URL はさまざまな方法で表現されます。 相対 URL: コードをコピー コードは次のとおりです。例.php デモ/example.php ./example.php ../../example.php /example.php 絶対URL: コードをコピー コードは次のとおりです。http://jb51.net/example.php http://jb51.net:80/example.php https://jb51.net/example.php 同時に、HTML には多数の要素属性値が存在します。一般的に、JavaScript を使用してこれらの URL 属性値を取得するには、次の 2 つの方法があります。 コードをコピー コードは次のとおりです。<a href="example.php" id="example-a">現時点では、ページの絶対 URL は http://jb51.net/ です</a> <スクリプト> var oA = document.getElementById('example-a'); oA.href == 'http://jb51.net/example.php'; oA.getAttribute('href') == 'example.php'; </スクリプト> 属性に直接アクセスして完全な絶対 URL を取得し、getAttribute メソッドを使用して元の属性値を取得することを期待します。実際、これは比較的理想的な結果です。すべての A レベル ブラウザーの中で、この結果を正常に取得できるのは Firefox と IE8 だけです。他のブラウザーでは、多かれ少なかれ特殊なケースがあります。要素属性が存在する特定の条件については、デモの例を参照してください。 ほとんどのブラウザで問題となるのは、どちらの方法も元の属性値を返すのに対し、実際のアプリケーションでは絶対 URL が必要になることが多いことです。「修飾されていない HREF 値の処理」の解決策は複雑すぎます。ここでは比較的簡単な解決策を示します。ブラウザの違いを考慮しなければ、コードは非常にシンプルになります。 <フォームアクション="example.php" id="example-form"> 現時点では、ページの絶対 URL は http://jb51.net/ です</form> コードをコピー コードは次のとおりです。<スクリプト> var oForm = document.getElementById('example-form'); //IE6、IE7、Safari、Chrome、Opera oForm.action == 'example.php'; oA.getAttribute('アクション') == 'example.php'; //絶対 URL を取得するための一般的なソリューション getQualifyURL(oForm, 'アクション') == 'http://jb51.net/example.php'; getQualifyURL = 関数(oEl,sAttr){ var sUrl = oEl[sAttr], oD、 bDo = 偽; //IE8より前のバージョンですか? //http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/ //http://msdn.microsoft.com/en-us/library/7kx09ct1%28VS.80%29.aspx /*@cc_on 試す{ bDo = @_jscript_version < 5.8 ?true : @false; }キャッチ(e){ bDo = 偽; } @*/ //Safari、Chrome、Operaの場合 if(/a/.__proto__=='//' || /source/.test((/a/.toString+'')) || /^関数 \(/.test([].sort)){ bDo = 真; } if(bDo){ oD = document.createElement('div'); /* //DOM操作の結果は変わりません var oA = document.createElement('a'); oA.href = oEl[sAttr]; oD.appendChild(oA); */ oD.innerHTML = ['<a href="',sUrl,'"></a>'].join(''); sUrl = oD.firstChild.href; } sUrl を返します。 } </スクリプト> IE6 と IE7 という 2 つの古いブラウザには、さらに興味深い点があります。HTML 要素 A、AREA、IMG の両方の方法で取得される属性値はすべて絶対 URL です。幸いなことに、Microsoft は getAttribute にこの問題を解決する 2 番目のパラメータを提供しています。同時に、上記の両方の方法で IFEAM 要素と LINK 要素の元の属性が返されるという問題も解決できます。 コードをコピー コードは次のとおりです。<link href="../../example.css" id="example-link"> <a href="example.php" id="example-a">現時点では、ページの絶対 URL は http://jb51.net/ です</a> <スクリプト> var oA = document.getElementById('example-a'), oLink = document.getElementById('example-a'); oA.href == 'http://jb51.net/example.php'; oA.getAttribute('href') == 'http://jb51.net/example.php'; oA.getAttribute('href',2) == 'example.php'; oLink.href == 'example.php'; oLink.getAttribute('href') == 'example.php'; oLink.getAttribute('href',4) == 'http://jb51.net/example.php'; </スクリプト> |
まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...
元のコード: center.html : <!DOCTYPE html> <htm...
目次Vue+ElementUI バックグラウンド管理フレームワークでは、ElementUI とは何で...
序文Dockerfile は Docker プログラムによって解釈されるスクリプトです。Docker...
最近、CSS 関連の知識ポイントをいくつか見直し、CSS における典型的なマージンの重なりの問題を整...
外部 CSS ファイルを使用したレンダリング パイプライン上図では、HTML データの要求から DO...
目次js のイベントイベントタイプ一般的なイベントイベント登録静的および動的登録の例onload 読...
はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...
目次スタイルスコープスタイルモジュール状態駆動型動的CSS要約するスタイルスコープ注意事項:スタイル...
境界プロパティの概要borderプロパティは要素の境界を設定します。境界線の3要素は、太さ、線の種類...
古いバージョンをアンインストールする以前に古いバージョンをインストールしたことがある場合は、まずそれ...
Docker システムの学習チュートリアルでは、Dockerfile を使用して Docker イメ...
ボックスモデルの計算<br />マージン + ボーダー + パディング + コンテンツC...
テーブルを美しくするために、行ごとに異なる境界線の色を設定できます。基本的な構文<TR 境界線...
この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...