In HTML, common URLs are represented in many ways:
Relative URL:
example.php
demo/example.php
./example.php
../../example.php
/example.php
Absolute URL:
http://dancewithnet.com/example.php
http://dancewithnet.com:80/example.php
https://dancewithnet.com/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:
<a href="example.php" id="example-a">The absolute URL of the page at this time is http://dancewithnet.com/</a>
<script>
var oA = document.getElementById('example-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'example.php';
</script>
We hope to get the complete absolute URL by directly accessing the attribute, and get its original attribute value through the getAttribute method. In fact, this is a relatively ideal result. Among all A-level browsers, only Firefox can successfully obtain this result. Like IE8, other browsers have more or less special cases. Please see the demonstration examples 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 complicated. Here is a relatively simple solution, which is very simple if you don't consider the difference in browser code:
<form action="example.php" id="example-form">
The absolute URL of the page at this time is http://dancewithnet.com/</form>
<script>
var oForm = document.getElementById('example-form');
//IE6, IE7, Safari, Chrome, Opera
oForm.action == 'example.php';
oA.getAttribute('action') == 'example.php';
//General solution for getting absolute URL
getQualifyURL(oForm,'action') == 'http://dancewithnet.com/example.php';
getQualifyURL = function(oEl,sAttr){
var sUrl = oEl[sAttr],
oD,
bDo = false;
//Whether it is a version before 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;
}
@*/
//If it is Safari, Chrome and Opera
if(/a/.__proto__=='//' || /source/.test((/a/.toString+''))
|| /^function (/.test([].sort)){
bDo = true;
}
if(bDo){
oD = document.createElement('div');
/*
//The result of DOM operation will not change
var oA = document.createElement('a');
oA.href = oEl[sAttr];
oD.appendChild(oA);
*/
oD.innerHTML = ['<a href="',sUrl,'"></a>'].join('');
sUrl = oD.firstChild.href;
}
return sUrl;
}
</script>
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 all absolute URLs. Fortunately , Microsoft provides a second parameter for getAttribute. This problem can be solved, and at the same time, the problem that the two methods mentioned above return the original attributes can also be solved for IFEAM and LINK elements:
Original text: 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">The absolute URL of the page at this time is http://dancewithnet.com/</a>
<script>
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>