URL representation in HTML web pages

URL representation in HTML web pages
In HTML, common URLs are represented in a variety of ways:
Relative URLs:

Copy code
The code is as follows:

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

Absolute URL:

Copy 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. Generally, there are two ways to obtain these URL attribute values ​​using JavaScript:

Copy code
The code is as follows:

<a href="example.php" id="example-a">At this time, the absolute URL of the page 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, 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 and IE8 can successfully get this result. Other browsers have more or less special cases. Please see the demonstration examples for specific conditions of which element attributes exist.
The problem in most browsers is that both methods return the original attribute value, while actual applications often require its absolute URL. The solution in "Dealing with unqualified HREF values" is too complicated. Here is a relatively simple solution. If you don't consider the difference in browsers, the code will be very simple:
<form action="example.php" id="example-form">
At this time, the absolute URL of the page is http://jb51.net/</form>

Copy 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%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 these two prehistoric browsers, IE6 and IE7. The attribute values ​​obtained by both methods in HTML elements A, AREA and IMG are all absolute URLs. Fortunately, Microsoft provides a second parameter for getAttribute to solve this problem. At the same time, it can also solve the problem that both methods mentioned above return the original attributes 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">At this time, the absolute URL of the page is 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>

<<:  Deep understanding of line-height and vertical-align

>>:  Some lesser-known sorting methods in MySQL

Recommend

Linux Dig command usage

Dig Introduction: Dig is a tool that queries DNS ...

Detailed explanation of JSONObject usage

JSONObject is just a data structure, which can be...

Learn Node.js from scratch

Table of contents url module 1.parse method 2. fo...

JavaScript to achieve the effect of tab bar switching

Tab bar: Click different tabs to display differen...

HTML+CSS to achieve responsive card hover effect

Table of contents accomplish: Summarize: Not much...

Text pop-up effects implemented with CSS3

Achieve resultsImplementation Code html <div&g...

Linux Basic Tutorial: Special Permissions SUID, SGID and SBIT

Preface For file or directory permissions in Linu...

Explain the difference between iframe and frame in HTML with examples

I don't know if you have used the frameset at...

Things to note when writing self-closing XHTML tags

The img tag in XHTML should be written like this:...

Complete steps to use samba to share folders in CentOS 7

Preface Samba is a free software that implements ...

Detailed tutorial on using Docker to build Gitlab based on CentOS8 system

Table of contents 1. Install Docker 2. Install Gi...

Detailed explanation of unique constraints and NULL in MySQL

Preface A requirement I had previously made, to s...