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>
相対的な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>
関連
-
QQの一時的なダイアログボックスをポップアップし、友人を追加せずにオンラインで話す効果を達成する方法
-
HambergurMenu (ハンバーガースタイルのメニュー)のHTML+Sass実装
-
htmlのドラッグ&ドロップによるコンテンツ位置の2つの実装方法
-
border-radius は、要素に丸みを帯びたボーダーを追加する方法です。
-
HTMLのプログラミングマークアップと文書構造の説明
-
リンク使用時にハイパーリンクジャンプをブロックする方法
-
htmlタグの表示モード(ブロックタグ、インラインタグ、インラインブロックタグ)
-
form ファイルをアップロードする際のenctypeフィールドの用途は何ですか?
-
htmlフレーム、Iframe、Framesetの違いについて
-
Web制作ではHタグを賢く使うべき
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
入力ボックススタイル変更概要のtype="file "について
-
色は、htmlでは6ビットのHexコードとrgbまたはキーワードで表現されます。
-
html でよく使われるいくつかのリダイレクトリンクのコード例
-
HTMLにおけるdivとspanの違い(共通点と相違点)
-
HTML中国語文字エンコーディング標準紹介
-
行間カラーチェンジを実現するHTML n方法 サンプルコード
-
Webページのメモリ使用量とCPU使用量を削減する方法
-
すべてのブラウザに対応したデータURIとMHTMLの完全ソリューション
-
XHTML文書におけるJavaScriptとCSSの適切な使用方法
-
HTMLにおける要素の水平・垂直方向の中央配置に関する考察