In HTML, common URLs have many representations:
Relative URL:
example.php
demo/example.php
./example.php
../../example.php
/example.php
Absolute URL:
http://jb51.net/example.php
http://jb51.net:80/example.php
https://jb51.net/example.php
At the same time, there are a large number of element attribute values in HTML that are URLs. Generally, there are two methods to obtain these URL attribute values using JavaScript:
We hope to get the complete absolute URL by directly accessing the attribute. Get its original attribute value through the getAttribute method. In fact, this is a relatively ideal result. Among all A-level browsers, only Firefox and IE8 can successfully obtain this result. Other browsers have more or less special circumstances. , please see the demonstration example for specific attributes of which elements exist.
The problem in most browsers is that both methods return the original attribute value, but in actual applications, what is often needed is its absolute URL. The solution in "Dealing with unqualified HREF values" is too Too complicated, here is a relatively simple solution, which will be very simple if you do not consider the difference in browser code:
<script> <br>var oForm = document.getElementById('example-form'); <br>//IE6, IE7, Safari, Chrome, Opera <br>oForm.action == 'example.php'; <br>oA.getAttribute('action') == 'example.php'; <br>//General solution for getting absolute 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>//Is it a version before 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 < 5.8 ?true : @false; <br />}catch(e){ <br />bDo = false; <br />} <br />@*/ <br />//If it is Safari, Chrome and 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 />//The result of the DOM operation will not change <br />var oA = document. createElement('a'); <br />oA.href = oEl[sAttr]; <br />oD.appendChild(oA); <br />*/ <br />oD.innerHTML = ['<a href="' ,sUrl,'"></a>'].join(''); <br>sUrl = oD.firstChild.href; <br>} <br>return sUrl; <br>} <br>< ;/script> <br>
</div>
<br>There are some more interesting things about the two prehistoric browsers IE6 and IE7. The attribute values obtained by the two methods in the HTML elements A, AREA and IMG are Absolute URL. Fortunately, Microsoft provides a second parameter for getAttribute to solve this problem. At the same time, it can also solve the problem of the two methods mentioned above that both return the original attribute for IFEAM and LINK elements: <br><br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode43'));"><u>Copy code</u></span></div>The code is as follows:</div>
<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><script> <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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
