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

TypeScript namespace merging explained

Table of contents Merge namespaces with the same ...

Sharing of design ideas for the official website of Navigation Century

...

Tips for using DIV container fixed height in IE6 and IE7

There are many differences between IE6 and IE7 in ...

mySQL server connection, disconnection and cmd operation

Use the mysql command to connect to the MySQL ser...

How to restore docker container data

The project test environment database data is los...

Example of how to implement keepalived+nginx high availability

1. Introduction to keepalived Keepalived was orig...

Html+CSS floating advertisement strip implementation

1.html part Copy code The code is as follows: <...

MySQL permission control detailed explanation

Table of contents mysql permission control Permis...

In-depth understanding of umask in new linux file permission settings

Preface The origin is a question 1: If your umask...

Solve the Linux Tensorflow2.0 installation problem

conda update conda pip install tf-nightly-gpu-2.0...

JavaScript canvas to achieve code rain effect

This article shares the specific code for canvas ...

Summary of common MySQL table design errors

Table of contents Mistake 1: Too many columns of ...

JS Canvas interface and animation effects

Table of contents Overview Canvas API: Drawing Gr...

Description of the default transaction isolation level of mysql and oracle

1. Transaction characteristics (ACID) (1) Atomici...

Detailed explanation of using scp command to copy files remotely in Linux

Preface scp is the abbreviation of secure copy. s...