Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
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
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 contains many properties related to the current web page and browser, including:
- document.URL
- document.getElementById
- document.characterSet
- document.contentType
- document.images
Using the document.URL Property
The document.URL property contains the location of the document as a string.
Syntax
var str = document.URL;
Here str is a string holding the full URL of the document.
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.
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 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>
Using the document.documentURI Property
Another alternative to show the full URL of a document is to use the document.documentURI property that returns the location as a string.
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.
Syntax
var str = document.documentURI;
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>
Both document.documentURI and document.URL return the same string representation of the location of the web page on the internet.
Example 4
In the code snippet below, we will extract both properties (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>
Comparison
| Property | Purpose | Return Value |
|---|---|---|
document.URL |
Get current page URL | String containing full URL |
document.documentURI |
Get current page URI | String containing full URI (same as URL) |
Conclusion
Both document.URL and document.documentURI provide the full URL of the current document as a string. Use either property to access the current page's location for navigation, debugging, or dynamic functionality.
2K+ Views
