1. ホーム
  2. Web制作
  3. HTML/Xhtml

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

2022-02-04 19:54:12
HTMLでは、一般的なURLはさまざまな方法で表現されます。
相対的なURLです。
コピーコード
コードは以下の通りです。

example.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にはURLの属性値を持つ要素が多数あり、JavaScriptでこれらのURL属性値を取得する方法は一般に2つあります。
コピーコード
コードは以下の通りです。

<a href="example.php" id="example-a"> この時点でのページの絶対URLは http://jb51.net/</a>
<script>
var oA = document.getElementById('example-a')。
oA.href == 'http://jb51.net/example.php'。
oA.getAttribute('href') == 'example.php';
</script>

属性に直接アクセスして完全な絶対URLを取得し、getAttributeメソッドでその元の属性値を取得したいのですが、これは実際にはより望ましい結果です。すべてのAクラスのブラウザで、この結果をスムーズに得られるのはFirefoxとIE8だけで、他のブラウザは多かれ少なかれ特殊なケースです。特定の要素がどんな属性を持っているか デモの例を見てみてください。
多くのブラウザで問題となるのは、どちらの方法でも元の属性値が返されることで、実際に必要とされるのはその絶対的なURLであることが多いのです。Dealing with unqualified HREF values にある解決策はあまりにも複雑なので、ここでは比較的簡単な解決策を紹介します。ブラウザのコードの違いを考えなければ、とてもシンプルな解決策になるはずです。
<form action="example.php" id="example-form">
この時点でのページの絶対的なURLは、http://jb51.net/</form>です。
コピーコード
コードは以下の通りです。

<script>
var oForm = document.getElementById('example-form')。
//IE6、IE7、Safari、Chrome、Opera
oForm.action == 'example.php';
oA.getAttribute('action') == 'example.php';
//絶対 URL を取得するための一般的な解決策
getQualifyURL(oForm,'action') == 'http://jb51.net/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
try{
bDo = @_jscript_version < 5.8 ?true : falseです。
}catch(e){
bDo = false とする。
}
@*/
//Safari、Chrome、Operaの場合
if(/a/. __proto__=='//' || /source/.test((/a/.toString+''))
|| /^function \(/.test([].sort)){ /^function.sort([].sort)){ /^function.sort([].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>

前時代的なブラウザであるIE6とIE7については、さらに興味深いことがあります。どちらの方法も、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>
<script>
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'。
</script>