HTML Web ページの URL 表現_HTML/Xhtml_Web ページの作成

HTML では、一般的な URL には多くの表現があります。
相対 URL:

コードをコピー

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

example.php
demo/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 属性値を取得するには、

コードをコピーしますコードは次のとおりです:

このときのページの絶対URLは http://jb51.net/ <script> var oA = document.getElementById('example -a'); <br>oA.href == 'http://jb51.net/example.php' ; <br>oA.getAttribute('href') == 'example.php'; ;/script> <br><br><br>getAttribute メソッドを通じて属性に直接アクセスして、完全な絶対 URL を取得したいと考えています。実際、これはすべての A の中で比較的理想的な結果です。 -レベルのブラウザでは、Firefox と IE8 のみがこの結果を正常に取得できます。他のブラウザには多かれ少なかれ特殊な状況があります。どの要素が存在するかについては、デモの例を参照してください。 <br>ほとんどのブラウザの問題は、どちらのメソッドも元の属性値を返すことですが、実際のアプリケーションでは、多くの場合、その絶対 URL が必要となるのですが、「修飾されていない HREF 値の処理」の解決策は複雑すぎます。比較的単純な解決策。ブラウザ コードの違いを考慮しなければ、非常に簡単です。 <br><form action="example.php" id="example-form"> </div>This の絶対 URLページは http://jb51.net/</form> <br><br><br><br><br><br>コードをコピーします <div class="msgheader"> <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode42'));"> コードは次のとおりです<u></u> </span><script> </div>var oForm = document.getElementById('example-form') </div>//IE6、IE7、Safari、Chrome、Opera <div class="msgborder" id="phpcode42">oForm .action == 'example.php'; <br>oA.getAttribute('action') == 'example.php'; <br>//絶対 URL を取得するための一般的な解決策<br>getQualifyURL(oForm,'action' ) == 'http://jb51.net/example.php'; <br>getQualifyURL = function(oEl,sAttr){ <br>var sUrl = oEl[sAttr], <br>oD, <br>bDo = false ; <br>//IE8 より前のバージョンですか<br>//http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/ <br>//http :/ /msdn.microsoft.com/en-us/library/7kx09ct1(VS.80).aspx <br>/*@cc_on <br>try{ <br>bDo = @_jscript_version < true : @false ; <br />}catch(e){ <br />bDo = false <br />} <br />@*/ <br />//Safari、Chrome、Opera の場合 <br />if(/a/.__proto__ ==' //' || /source/.test((/a/.toString '')) <br />|| /^function (/.test([].sort)){ <br />bDo = true ; <br />} <br />if(bDo){ <br />oD = document.createElement('div'); <br />/* <br />//DOM 操作の結果は変更されません <br />var oA = ドキュメント.createElement('a'); <br />oA.href = oEl[sAttr]; <br />*/ <br />oD.innerHTML = [' href="' ,sUrl,'"></a>'].join(''); <br>sUrl = oD.firstChild.href; <br>return sUrl; <br>&lt ;/script> <br><br><br>2 つの先史時代のブラウザ IE6 と IE7 には、HTML 要素 A、AREA、および 2 つのメソッドによって取得される属性値がいくつかあります。 IMG は絶対 URL です。幸いなことに、Microsoft はこの問題を解決するために getAttribute の 2 番目のパラメーターを提供しています。同時に、IFEAM 要素と LINK 要素の元の属性を返す上記の 2 つのメソッドの問題も解決できます。 ><br><br> <br><br><br>コードをコピー</div> <br><br>コードは次のとおりです:<br><div class="msgborder" id="phpcode43"> <br><link href="../../example.css" id="example-link"> <br><a href="example.php" id="example-a">今回の页面绝对URLはhttp://jb51.net/</a> <br> <br>var oA = document.getElementById('example-a'), <br>oLink = document.getElementById('example-a'); <br>oA.href == 'http://jb51.net/example.php'; <br>oA.getAttribute('href') == 'http://jb51.net/example.php'; <br>oA.getAttribute('href',2) == 'example.php'; <br>oLink.href == 'example.php'; <br>oLink.getAttribute('href') == 'example.php'; <br>oLink.getAttribute('href',4) == 'http://jb51.net/example.php'; <br></script>