URL representation in HTML web pages_HTML/Xhtml_Web page production

In HTML, common URLs have many representations:
Relative URL:

Copy code

The code is as follows :

example.php
demo/example.php
./example.php
../../example.php
/example.php

Absolute URL:

Copy the code

The code is as follows:

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:

Copy code

The code is as follows:

<a href="example.php" id="example-a">The absolute URL of the page at this time is http://jb51.net/ </a>
<script>
var oA = document.getElementById('example-a');
oA.href == 'http://jb51.net/example.php' ;
oA.getAttribute('href') == 'example.php';
</script>

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:
<form action="example.php" id="example-form">
This The absolute URL of the page is http://jb51.net/</form>

Copy the code

The code is as follows:

<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://jb51.net/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(VS.80).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 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;
}
&lt ;/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 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:

Copy code

The code is as follows:

<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>