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 要素の元の属性が返されるという問題も解決できます。

コードをコピー

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