In HTML, there are many common URLs:
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 the html. Generally, there are two ways to obtain these url attribute values using javascript:
<a href=example.php id=example-a>At this time the page is absolutely url 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 obtain a complete absolute url by directly accessing attributes and obtain 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. For specific attributes of which elements have what kind of conditions, please see the demonstration example .
The problem in most browsers is that both methods return the original attribute value, while in actual applications, what is often needed is its absolute url. The solution in "dealing with unqualified href values" is too complex. Here is a relatively simple solution. It will be very simple if you do not consider the difference between the browser code:
<form action=example.php id=example-form>
At this time, the page is absolutely url 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';
//Generic solution to get absolute url
getqualifyurl(oform,'action') == 'http://dancewithnet.com/example.php';
getqualifyurl = function(oel,sattr){
var surl = oel[sattr],
od,
bdo = false;
//Is it 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 results obtained by the 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 in 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 urls. Fortunately, Microsoft provides a second parameter for getattribute to solve this problem, and can also solve the problem of returning the original attributes for the ifeam and link elements:
<link href=../../example.css id=example-link>
<a href=example.php id=example-a>At this time the page is absolutely url 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>