HTML Web ページにおける URL の表現

HTML Web ページにおける URL の表現
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';
</スクリプト>

<<:  行の高さと垂直方向の配置についての深い理解

>>:  MySQL のあまり知られていないソート方法

推薦する

Vue プロジェクト @change 複数のパラメータを使用して複数のイベントを渡す

まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...

Vue+Elementバックグラウンド管理フレームワークの統合実践

目次Vue+ElementUI バックグラウンド管理フレームワークでは、ElementUI とは何で...

Docker 基本チュートリアル: Dockerfile 構文の詳細な説明

序文Dockerfile は Docker プログラムによって解釈されるスクリプトです。Docker...

CSS マージンの重複と解決策の探索の詳細な説明

最近、CSS 関連の知識ポイントをいくつか見直し、CSS における典型的なマージンの重なりの問題を整...

CSS が初期読み込み時の白い画面の時間に与える影響

外部 CSS ファイルを使用したレンダリング パイプライン上図では、HTML データの要求から DO...

JavaScript イベントの概念の詳細な説明 (静的登録と動的登録の区別)

目次js のイベントイベントタイプ一般的なイベントイベント登録静的および動的登録の例onload 読...

MySQLの自動増分IDについて知っておくべきこと

はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...

Vue3 シングルファイルコンポーネントのスタイル機能の詳細な説明

目次スタイルスコープスタイルモジュール状態駆動型動的CSS要約するスタイルスコープ注意事項:スタイル...

CSS の border 属性と display 属性の使い方の簡単な分析

境界プロパティの概要borderプロパティは要素の境界を設定します。境界線の3要素は、太さ、線の種類...

Ubuntu 18.04 (コミュニティ エディション) に Docker CE をインストールする方法

古いバージョンをアンインストールする以前に古いバージョンをインストールしたことがある場合は、まずそれ...

Dockerfile における ENTRYPOINT と CMD の違い

Docker システムの学習チュートリアルでは、Dockerfile を使用して Docker イメ...

div ボックス モデルの使用経験の概要

ボックスモデルの計算<br />マージン + ボーダー + パディング + コンテンツC...

HTML テーブルタグチュートリアル (21): 行の境界線の色属性 BORDERCOLOR

テーブルを美しくするために、行ごとに異なる境界線の色を設定できます。基本的な構文<TR 境界線...

Linux ファイル管理コマンド例の分析 [権限、作成、削除、コピー、移動、検索など]

この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...