HTML では、一般的な URL はさまざまな方法で表現されます。
相対URL:
example.php
デモ/example.php
./example.php
../../example.php
/example.php
絶対 URL:
http://dancewithnet.com/example.php
http://dancewithnet.com:80/example.php
https://dancewithnet.com/example.php
同時に、HTML には URL である要素の属性値が多数存在します。一般に、JavaScript を使用してこれらの URL 属性値を取得するには、次の 2 つの方法があります。
<a href="example.php" id="example-a">この時点のページの絶対 URL は http://dancewithnet.com/</a> です。
<スクリプト>
var oA = document.getElementById('example-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'example.php';
</script>
属性に直接アクセスして完全な絶対 URL を取得し、getAttribute メソッドを通じてその元の属性値を取得したいと考えています。実際、これは、すべての A レベルのブラウザーの中で、この結果を正常に取得できるのは Firefox だけです。 IE8 と同様、他のブラウザにも多かれ少なかれ特殊なケースがあり、どの要素が存在するかについてはデモンストレーションの例を参照してください。
ほとんどのブラウザの問題は、どちらのメソッドも元の属性値を返すことですが、実際のアプリケーションでは、多くの場合、その絶対 URL が必要となるため、「 非修飾の HREF 値の処理」の解決策は非常に複雑です。ブラウザーのコードの違いを考慮しなければ、これは非常に簡単です。
<form action="example.php" id="example-form">
この時点のページの絶対 URL は http://dancewithnet.com/</form> です。
<スクリプト>
var oForm = document.getElementById('サンプルフォーム');
//IE6、IE7、Safari、Chrome、Opera
oForm.action == 'example.php';
oA.getAttribute('action') == 'example.php';
//絶対 URL を取得するための一般的な解決策
getQualifyURL(oForm,'action') == 'http://dancewithnet.com/example.php';
getQualifyURL = function(oEl,sAttr){
var sUrl = oEl[sAttr],
OD、
bDo = false;
//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 = false;
}
@*/
//Safari、Chrome、Operaの場合
if(/a/.__proto__=='//' || /source/.test((/a/.toString+''))
|| /^関数 (/.test([].sort)){
bDo = true;
}
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 を返します。
}
</script>
2 つの先史時代のブラウザー IE6 と IMG には、さらに興味深い点がいくつかあります。HTML 要素 A、AREA、および IMG の 2 つのメソッドによって取得される属性値は、すべて絶対 URL です。問題を解決できると同時に、上記の 2 つのメソッドが元の属性を返すという問題も、IFEAM 要素と LINK 要素について解決できます。
原文：http: //dancewithnet.com/2009/07/27/get-right-url-from-html/
<link href="../../example.css" id="example-link">
<a href="example.php" id="example-a">この時点のページの絶対 URL は http://dancewithnet.com/</a> です。
<スクリプト>
var oA = document.getElementById('example-a'),
oLink = document.getElementById('example-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'http://dancewithnet.com/example.php';
oA.getAttribute('href',2) == 'example.php';
oLink.href == 'example.php';
oLink.getAttribute('href') == 'example.php';
oLink.getAttribute('href',4) == 'http://dancewithnet.com/example.php';
</script>