Skip to main content

Absolute or Relative URL issues and the solution


This article demonstrates the issues occur due to the usage of relative URLs while shifting pages from one location to another or the misuse of relative URLs and how to overcome those issues.

Relative URLs examples:
/* HTML example */
<img src="image.jpg" />


/* CSS example */
.image-div
{
    background-image: url(image.jpg);
}

/* JavaScript example */
image.src = 'image.jpg';

Relative URLs and expected issues
In simple words, relative URL reference link on the same server (or domain).
  • <img src="image.jpg" /> Reference of a resource from same directory

  • <img src="../../image.jpg" /> In CSS/HTML, ../ used to reference parent directory. In the above example, ../ is used two times; so it is referencing a resource from 2-level parent directory.

  • <img src="sub-directory/image.jpg" />
    Reference of a resource from sub directory
The issue occurs when when shifting a page from one location to another which cause broken links.

/ and ../ are two different things:
  • <img src="/image.jpg" />
    Reference of a resource from root directory
  • <img src="../image.jpg" />
    Reference of a resource from 1-level parent directory

  • <img src="image.jpg" />
    Reference of a resource from same directory
Absolute URLs: The solution or ...
Absolute URLs solves most of relative URLs issues and also helps prioritized your website (SEO!). Absolute URLs also help testers or late-viewers to understand (+access) the located resource easily.

In JavaScript, we can create a global variable to store domain (root) URL:

/* Global variable */
var domainName = location.protocol + '//' + location.host;

/* Usage */
image.src = domainName + '/image.jpg';

JAMES PADOLSEY way of getting a fully qualified (absolute) URL in JavaScript:

function qualifyURL(url) {
    var img = document.createElement('img');
    img.src = url; // set string url
    url = img.src; // get qualified/absolute url
    img.src = null; // no server request
    return url;
}
// Tested successfully in IE6/7, FF2/3, Safari3, Opera9, Chrome (All on Windows XP) 

// EXAMPLE:
var myRelativeURL = 'blah/page.html';
alert( qualifyURL(myRelativeURL) );

Absolute URLs are helpful when shifting a page from one location to another because you don't have to change resource's URLs from within the shifted page.

A good link for parsing or making absolute URLs in JavaScript: https://gist.github.com/1088850

Protocol Level URLS:
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
<img src="//domain/image.jpg" />
Omitting the protocol—which makes the URL relative—prevents mixed content issues and results in minor file size savings.

Popular posts from this blog

Save files on disk using JavaScript or JQuery!

You can save any file, or DataURL, or Blob on disk using HTML5's newly introduced "download" attribute.

Use cases:

1. Force browser to download/save files like PDF/HTML/PHP/ASPX/JS/CSS/etc. on disk
2. Concatenate all transmitted blobs and save them as file on disk - it is useful in file sharing applications

Microsoft Edge? (msSaveBlob/msSaveOrOpenBlob)https://msdn.microsoft.com/en-us/library/hh779016(v=vs.85).aspx

/** * @param {Blob} file - File or Blob object. This parameter is required. * @param {string} fileName - Optional file name e.g. "image.png" */functioninvokeSaveAsDialog(file, fileName){if(!file){throw'Blob object is required.'; }if(!file.type){ file.type ='video/webm'; }var fileExtension = file.type.split('/')[1]; if(fileName && fileName.indexOf('.')!==-1){var splitted = fileName.split('.'); fileName = splitted[0]; fileExtension = splitted[1]; }var fileFullName …

Disable ICE Trickling

ICE trickling is a process where candidate-pairs are shared as soon as gathered by the ICEAgent.

Its true that, there is NO JavaScript API "currently" available in RTCWeb drafts to disable ICE-trickling process however, there is a trick that can be used to merge all candidate pairs in the session-description, and then you merely need to share that "single" SDP only.

The trick is simple: Wait until "end-of-candidate" signal is fired.

Usually "onicecandidate" event returns "NULL" entry for "event.candidate" object.

In "old-good" days, we were watching for "oniceconnectionstatechange" event, and checking for "peer.iceGatheringState === 'complete'" to return the SDP.

BTW, you can still listen for both "end-of-candidate" NULL value, as well as "peer.iceGatheringState === 'complete'".

peer.oniceconnectionstatechange =function(event){if(peer.iceGatheringState ==='…

WebRTC Tips & Tricks

This blog post is added for WebRTC newbies and beginners who wanna learn key-ideas; get code snippets and enjoy WebRTC life!

1. How to mute/unmute media streams?Remember, mute/unmute isn't implemented as a default/native features in either media capturing draft i.e. getUserMedia API also in WebRTC draft i.e. RTCPeerConnection API.

Also, there is no "onmuted" and "onunmuted" event defined or fired in the WebRTC native implementations.

Usually, as per chromium team's suggestions, media-tracks are enabled/disabled to mute/unmute the streams.

Remember, "MediaStreamTrack.enabled=false" NEVER sends silence audio or blank/black video; it doesn't stop packet transmission. Although when you set "MediaStreamTracks.enabled=false", packets are devoid of meaningful data. A solution for this approach is to hold/unhold tracks from SDP and renegotiate the connections. See next section for more information.

MediaStream object is just a synchronous conta…