Example of converting relative path to absolute path using javascript

Example of converting relative path to absolute path using javascript_Basic knowledge

WBOY

Release： 2016-05-16 16:55:41

Original

1179 people have browsed it

What is introduced here are essentially two methods, by creating DOM or calculating through JavaScript:

1) Through the newly created Image, after testing, an Aborted request will be sent, and IE6 does not support it. Changing the new Image to document.createElement('IMG') is the same; the test may not like this solution;

Copy code The code is as follows:

function getAbsoluteUrl(url){
 var img = new Image();
 img.src = url; //Set the relative path to Image, and a request will be sent
 url = img.src; //The relative path has become an absolute path
 img.src = null; // Cancel request
 return url;
}
getAbsoluteUrl("showroom/list");

2) Create Anchor (link). This method will not issue any request (the request will be generated when joining the DOM), but IE6 does not support it either

Copy code The code is as follows:

/*jslint regexp: true, white: true, maxerr : 50, indent: 2 */

function parseURI(url) {
 var m = String(url).replace(/^s |s $/g, '').match(/^ ([^:/?#] :)?(//(?:[^:@]*(?::[^:@]*)?@)?(([^:/?#]*)( ?::(d*))?))?([^?#]*)(?[^#]*)?(#[sS]*)?/);
 // authority = '// ' user ':' pass '@' hostname ':' port
 return (m ? {
 href : m[0] || '',
 protocol : m[1] || '', 
 authority: m[2] || '',
 host : m[3] || '',
 hostname : m[4] || '',
 port : m[5 ] || '',
 pathname : m[6] || '',
 search : m[7] || '',
 hash : m[8] || ''
 } : null);
}

function absolutizeURI(base, href) {// RFC 3986

 function removeDotSegments(input) {
 var output = [];
 input.replace(/^(..?(/|$)) /, '')
 .replace(//(.(/|$)) /g, '/')
 .replace (//..$/, '/../')
 .replace(//?[^/]*/g, function (p) {
 if (p === '/.. ') {
           output.pop(); replace(/^//, input.charAt(0) === '/' ? '/' : '');
 }

 href = parseURI(href || '');
 base = parseURI(base || '');

 return !href || !base ? null : (href.protocol || base.protocol) 
 (href.protocol || href. authority ? href.authority : base.authority) 
 removeDotSegments(href.protocol || href.authority || href.pathname.charAt(0) === '/' ? href.pathname : (href.pathname ? ( (base.authority && !base.pathname ? '/' : '') base.pathname.slice(0, base.pathname.lastIndexOf('/') 1) href.pathname) : base.pathname)) 
 (href.protocol || href.authority || href.pathname ? href.search : (href.search || base.search)) 
                 href.hash;
}


 
Because our product is a mobile web page, it no longer supports IE6, so we ended up using the second solution; 


It can be seen that when accessing all Images and Anchors using the original method, absolute paths are returned. If you want to return the original relative path, you can use the DOM query method, such as jQuery.attr() Method: 