How to Dealing with unqualified HREF values

View: 309    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Javascript   Fields: Other

9 point/2 review File has been tested

However, as one commentator pointed out, the proposed solution couldn’t cater for changes in location context, such as that caused by a element, or within the context of an included document such as a stylesheet or a page in an .

Introduction

However, as one commentator pointed out, the proposed solution couldn’t cater for changes in location context, such as that caused by a <base> element, or within the context of an included document such as a stylesheet or a page in an <iframe>.

To fix that it was necessary to abandon the use of the location object entirely, and parse URLs as strings. But the upshot of this is a far more flexible and useful method, that automatically caters for<base> elements, and is also able to accept an input location string to use as context.

So from the original code, this:

<span style="color:rgb(0, 0, 0);"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">//get the current document location object
var loc = document.location;</span></span></span>

Becomes this:

<span style="color:rgb(0, 0, 0);"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">//get the current document location href
var here = document.location.href;
 
//look for a base element to use instead
var bases = document.getElementsByTagName('base');
if(bases.length > 0)
{
 var basehref = bases[0].getAttribute('href');
 if(basehref && basehref != '')
 {
 here = basehref;
 }
}
 
//if the context argument is present and non-empty string, use that instead
if(typeof context == 'string' && context != '')
{
 here = context;
}
 
//extract the protocol, host and path
//and create a location object with the data
var parts = here.replace('//', '/').split('/');
var loc = {
 'protocol' : parts[0],
 'host' : parts[1]
 }
parts.splice(0, 2);
loc.pathname = '/' + parts.join('/');</span></span></span>

Here’s the complete revised function:

<span style="color:rgb(0, 0, 0);"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">//qualify an HREF to form a complete URI
function qualifyHREF(href, context)
{
 //get the current document location href
 var here = document.location.href;
 
 //look for a base element to use instead
 var bases = document.getElementsByTagName('base');
 if(bases.length > 0)
 {
 var basehref = bases[0].getAttribute('href');
 if(basehref && basehref != '')
 {
 here = basehref;
 }
 }
 
 //if the context argument is present and non-empty string, use that instead
 if(typeof context == 'string' && context != '')
 {
 here = context;
 }
 
 //extract the protocol, host and path
 //and create a location object with the data
 var parts = here.replace('//', '/').split('/');
 var loc = {
 'protocol' : parts[0],
 'host' : parts[1]
 }
 parts.splice(0, 2);
 loc.pathname = '/' + parts.join('/');
 
 //build a base URI from the protocol plus host (which includes port if applicable)
 var uri = loc.protocol + '//' + loc.host;
 
 //if the input path is relative-from-here
 //just delete the ./ token to make it relative
 if(/^(./)([^/]?)/.test(href))
 {
 href = href.replace(/^(./)([^/]?)/, '$2');
 }
 
 //if the input href is already qualified, copy it unchanged
 if(/^([a-z]+):///.test(href))
 {
 uri = href;
 }
 
 //or if the input href begins with a leading slash, then it's base relative
 //so just add the input href to the base URI
 else if(href.substr(0, 1) == '/')
 {
 uri += href;
 }
 
 //or if it's an up-reference we need to compute the path
 else if(/^((../)+)([^/].*$)/.test(href))
 {
 //get the last part of the path, minus up-references
 var lastpath = href.match(/^((../)+)([^/].*$)/);
 lastpath = lastpath[lastpath.length - 1];
 
 //count the number of up-references
 var references = href.split('../').length - 1;
 
 //get the path parts and delete the last one (this page or directory)
 var parts = loc.pathname.split('/');
 parts = parts.splice(0, parts.length - 1);
 
 //for each of the up-references, delete the last part of the path
 for(var i=0; i<references; i++)
 {
 parts = parts.splice(0, parts.length - 1);
 }
 
 //now rebuild the path
 var path = '';
 for(i=0; i<parts.length; i++)
 {
 if(parts[i] != '')
 {
 path += '/' + parts[i];
 }
 }
 path += '/';
 
 //and add the last part of the path
 path += lastpath;
 
 //then add the path and input href to the base URI
 uri += path;
 }
 
 //otherwise it's a relative path,
 else
 {
 //calculate the path to this directory
 path = '';
 parts = loc.pathname.split('/');
 parts = parts.splice(0, parts.length - 1);
 for(var i=0; i<parts.length; i++)
 {
 if(parts[i] != '')
 {
 path += '/' + parts[i];
 }
 }
 path += '/';
 
 //then add the path and input href to the base URI
 uri += path + href;
 }
 
 //return the final uri
 return uri;
}</span></span></span>

But wait … there’s more!

Having done that, I realised I was only a hop and a skip away from implementing a JavaScript equivalent of PHP’s parse_url method:

<span style="color:rgb(0, 0, 0);"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">//parse a URL to form an object of properties
function parseURL(url)
{
 //save the unmodified url to href property
 //so that the object we get back contains
 //all the same properties as the built-in location object
 var loc = { 'href' : url };
 
 //split the URL by single-slashes to get the component parts
 var parts = url.replace('//', '/').split('/');
 
 //store the protocol and host
 loc.protocol = parts[0];
 loc.host = parts[1];
 
 //extract any port number from the host
 //from which we derive the port and hostname
 parts[1] = parts[1].split(':');
 loc.hostname = parts[1][0];
 loc.port = parts[1].length > 1 ? parts[1][1] : '';
 
 //splice and join the remainder to get the pathname
 parts.splice(0, 2);
 loc.pathname = '/' + parts.join('/');
 
 //extract any hash and remove from the pathname
 loc.pathname = loc.pathname.split('#');
 loc.hash = loc.pathname.length > 1 ? '#' + loc.pathname[1] : '';
 loc.pathname = loc.pathname[0];
 
 //extract any search query and remove from the pathname
 loc.pathname = loc.pathname.split('?');
 loc.search = loc.pathname.length > 1 ? '?' + loc.pathname[1] : '';
 loc.pathname = loc.pathname[0];
 
 //return the final object
 return loc;
}</span></span></span>

So that’s two more for the toolkit!

 

 

How to Dealing with unqualified HREF values

How to Dealing with unqualified HREF values Posted on 07-05-2016  However, as one commentator pointed out, the proposed solution couldn’t cater for changes in location context, such as that caused by a element, or within the context of an included document such as a stylesheet or a page in an . 4.5/10 309

Comment:

To comment you must be logged in members.

Files with category

  • JUnit 5 State Of The Union using java

    View: 633    Download: 0   Comment: 0   Author: none  

    JUnit 5 State Of The Union using java

    Category: Javascript
    Fields: Other

    1.5/3 review
    JUnit 5 has been under development for about 14 months now and the prototype is almost a year old. Time to summarize what happened so far, where the project stands, and where it’s going.

  • Getting Started with Dropwizard using java

    View: 736    Download: 0   Comment: 0   Author: none  

    Getting Started with Dropwizard using java

    Category: Javascript
    Fields: Other

    1.5/3 review
    Dropwizard is a framework for building RESTful web services in Java. In this tutorial we’re going to have a look at how to get started with developing a Dropwizard application by building a new service from scratch.

  • Build Query NULL Value in MySql

    View: 340    Download: 0   Comment: 0   Author: none  

    Build Query NULL Value in MySql

    Category: Javascript
    Fields: Other

    2.5/2 review
    Misunderstanding NULL is common mistake beginners do while writing MySql query. While quering in MySql they compare column name with NULL. In MySql NULL is nothing or in simple word it isUnknown Value so if you use comparison operator for NULL values...

  • Manage Your JavaScript Application State with MobX

    View: 406    Download: 0   Comment: 0   Author: none  

    Manage Your JavaScript Application State with MobX

    Category: Javascript
    Fields: Other

    2.25/2 review
    This article was peer reviewed by Michel Weststrate and Aaron Boyer. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

  • Build Bringing Pages to Life with the Web Animations API

    View: 364    Download: 0   Comment: 0   Author: none  

    Build Bringing Pages to Life with the Web Animations API

    Category: Javascript
    Fields: Other

    3/3 review
    This article is by guest author Dudley Storey. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • How to Style Google Custom Search Manually

    View: 346    Download: 0   Comment: 0   Author: none  

    How to Style Google Custom Search Manually

    Category: Javascript
    Fields: Other

    0/0 review
    Website owners very often decide on using Google’s Custom Search Engine (GCSE) for searching through their content instead of using built-in and/or custom search functionality. The reason is simple – it’s much less work, and most often it does the...

  • Test React Components Using Jest

    View: 5116    Download: 0   Comment: 0   Author: none  

    Test React Components Using Jest

    Category: Javascript
    Fields: Other

    4.5/1 review
    This article is by guest author Jack Franklin. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • Programming Question Reverse String without using String function

    View: 821    Download: 0   Comment: 0   Author: none  

    Programming Question Reverse String without using String function

    Category: Javascript
    Fields: Other

    4.5/1 review
    Write a program to reverse string without using string function. You don’t have to use any in-built string library function. This problem can be solved by multiple approaches. Let’s check it.

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd