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

How to use JSX in Vue

What is JSX JSX is a syntax extension of Javascri...

How to assign default values ​​to fields when querying MySQL

need When querying a field, you need to give the ...

Detailed explanation of the payment function code of the Vue project

1. Alipay method: Alipay method: Click Alipay to ...

Detailed explanation of the platform bus of Linux driver

Table of contents 1. Introduction to platform bus...

Summary of commonly used escape characters in HTML

The commonly used escape characters in HTML are s...

A brief talk about Rx responsive programming

Table of contents 1. Observable 2. Higher-order f...

Detailed examples of how to use the box-shadow property in CSS3

There are many attributes in CSS. Some attributes...

How to optimize the slow Like fuzzy query in MySQL

Table of contents 1. Introduction: 2. The first i...

How to use nginx as a proxy cache

The purpose of using cache is to reduce the press...

A brief analysis of MySQL explicit type conversion

CAST function In the previous article, we mention...

Comparative Analysis of UI Applications of Image Social Networking Sites (Figure)

In our life, work and study, social networks have ...

Implementation of TypeScript in React project

Table of contents 1. Introduction 2. Usage Statel...

Detailed explanation of CSS3 Flex elastic layout example code

1. Basic Concepts //Any container can be specifie...