Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to show the full URL of a document with JavaScript?
We use the URL property of the document object to show the full URL of a document with JavaScript. The document object, part of the DOM, corresponds to the current web page that the browser has loaded. It Contains all the information about the condition of the browser as well as the web page. It can be visualized as a hierarchy that is obtained after rendering the HTML structure of the web page.
URL stands for Uniform Resource Locator. It contains the address of a resource on the internet. A Typical URL looks something like this−
http://www.example.com/index.html
It is the uniform address of the resource file index.html on the internet, meaning it can be universally found at this location.
The Document Object Model of JavaScript acts as a layer of abstraction on the HTML page, creating an object-based model for the same. The document object is the entry point of the hierarchy also including other objects for the body, table, etc. HTML tags.
It contains many properties related to the current web page that the browser has loaded and of the web browser as well. Some of them are −
- document.URL
- document.getElementById
- document.characterSet
- document.contentType
- document.images
Using the document.URL Property
It is a property of the document object. It contains the location of the document as a String. It is of the form given in the example above.
Syntax
var str = document.URL;
Here the str is string holding the full URL of a document.
Let’s look at an example to understand better.
Example 1
In the code snippet below, we will use the document.URL property to display the location of the page.
<!DOCTYPE html> <html> <head> <title>URL of a document in JavaScript Example</title> </head> <body> <div id = "url"></div> <script> var str = document.URL; document.getElementById("url").innerHTML = "URL: " + str; </script> </body> </html>
It prints the URL of the document in the body.
The URL thus obtained from the document object can be used for different purposes. Let us look at an example.
Example 2
In the below code snippet, we will create a button that first extracts the url of the current document and then opens a new tab/window with the same url thus replicating the current web page.
<!DOCTYPE html> <html> <head> <title>URL of a document in JavaScript Example</title> </head> <body> <center> <p>This button will create a new browser tab with the same content. </p> </center> <div id = "url"></div> <script> var url = document.URL; document.getElementById("url").innerHTML = "URL: " + url ; function replicateTab(){ window.open(url); } </script> <center> <button id = "button" onclick = "replicateTab()">Click me to replicate ! </button> </center> </body> </html>
Another alternative to show the full URL of a document is to use the document.documentURI property that returns the location as a string.
Using the document.documentURI Property
URI stands for Uniform Resource Identifier. A Uniform Resource Identifier is a string of characters that uniquely identifies a logical or physical resource on the web. It is not the same as a URL.
Syntax
var str = document.documentURI;
Let’s look at an example.
Example 3
In the program below, we will use the document.documentURI property to display the location of the page.
<!DOCTYPE html> <html> <head> <title>URI of a document in JavaScript Example</title> </head> <body> <div id = "url"></div> <script> var str = document.documentURI; document.getElementById("url").innerHTML = "URI: " + str; </script> </body> </html>
URLs are identifiers that locate the address of the resource as well as specify the technique used to retrieve it.
However, both document.documentURI and document.URL returns the same string representation of the location of the web page on the internet.
Let’s see this with an example −
Example 4
In the code snippet below, we will be extracting both the properties i.e URL and URI in separate variables and compare them to log a Success message.
<!DOCTYPE html> <html> <head> <title>URL of a document in JavaScript Example</title> </head> <body> <div id = "url"> </div> <script> var url = document.URL var uri = document.documentURI var urlDiv = document.getElementById("url") checkValidity() function checkValidity(){ if(url == uri){ urlDiv.innerHTML = "Success !"; } else{ urlDiv.innerHTML = "Failure !"; } } </script> </body> </html>
In the code above we have created two variables in which we store the document.URL as well as document.documentURI. Then we compare those strings and log the message in the HTML body.
Conclusion
The document object model provides a lot of flexibility, and functionality as well. It helps programmers integrate browser properties as well as web page properties with HTML.
1K+ Views
