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

Detailed explanation of the TARGET attribute of the HTML hyperlink tag A

The hyperlink <a> tag represents a link poin...

Use vue2+elementui for hover prompts

Vue2+elementui's hover prompts are divided in...

How to split data in MySQL table and database

Table of contents 1. Vertical (longitudinal) slic...

Understanding and application scenarios of enumeration types in TypeScript

Table of contents 1. What is 2. Use Numeric Enume...

Detailed installation and use tutorial of mysql 8.0.15 under windows

This article shares with you the detailed install...

JavaScript to achieve simple drag effect

This article shares the specific code of JavaScri...

MySQL 5.7.20 free installation version configuration method graphic tutorial

I have seen many relevant tutorials on the Intern...

Detailed description of component-based front-end development process

Background <br />Students who work on the fr...

How to configure Jupyter notebook in Docker container

Jupyter notebook is configured under the docker c...

React native ScrollView pull down refresh effect

This article shares the specific code of the pull...

How to implement responsive layout with CSS

Implementing responsive layout with CSS Responsiv...

How to implement Nginx configuration detection service status

1. Check whether the check status module is insta...

How to use sed command to efficiently delete specific lines of a file

Preface Normally, if we want to delete certain li...