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
HTML DOM Anchor origin Property
The HTML DOM Anchor origin property returns a string containing the protocol, hostname, and port number of a URL. This is a read-only property that provides the origin portion of the anchor element's href attribute value.
Syntax
Following is the syntax for the Anchor origin property −
anchorElement.origin
Return Value
The origin property returns a string representing the origin of the URL, which includes −
- Protocol − The scheme part (http:, https:, ftp:, etc.)
- Hostname − The domain name or IP address
- Port − The port number (if explicitly specified)
For example, if the href is https://www.example.com:8080/path/page.html, the origin would be https://www.example.com:8080.
Example
Following example demonstrates the DOM Anchor origin property along with related properties −
<!DOCTYPE html>
<html>
<head>
<title>Anchor Origin Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>Company Website</h1>
<p><a id="mylink" hreflang="en" href="https://www.example.com:8080/products/catalog.html">Products Catalog</a></p>
<h2 id="result">Click a button to see the result</h2>
<button onclick="displayHref()" style="margin: 5px; padding: 8px;">Display Full URL</button>
<button onclick="displayOrigin()" style="margin: 5px; padding: 8px;">Display Origin</button>
<button onclick="displayHreflang()" style="margin: 5px; padding: 8px;">Display Language</button>
<script>
function displayHref() {
var anchor = document.getElementById("mylink");
document.getElementById("result").innerHTML = "Full URL: " + anchor.href;
}
function displayOrigin() {
var anchor = document.getElementById("mylink");
document.getElementById("result").innerHTML = "Origin: " + anchor.origin;
}
function displayHreflang() {
var anchor = document.getElementById("mylink");
document.getElementById("result").innerHTML = "Language: " + anchor.hreflang;
}
</script>
</body>
</html>
The output shows three buttons that demonstrate different anchor properties −
Company Website Products Catalog (as a clickable link) Click a button to see the result [Display Full URL] [Display Origin] [Display Language] Clicking "Display Origin" shows: Origin: https://www.example.com:8080 Clicking "Display Full URL" shows: Full URL: https://www.example.com:8080/products/catalog.html Clicking "Display Language" shows: Language: en
Working with Different URL Formats
The origin property handles various URL formats differently. Here are some examples of how different URLs return their origins −
Example
<!DOCTYPE html>
<html>
<head>
<title>Various URL Origins</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Different URL Origins</h2>
<p><a id="link1" href="https://www.example.com/page">HTTPS without port</a></p>
<p><a id="link2" href="http://localhost:3000/app">HTTP with port</a></p>
<p><a id="link3" href="ftp://files.example.com/data">FTP protocol</a></p>
<button onclick="showAllOrigins()" style="padding: 8px; margin-top: 10px;">Show All Origins</button>
<div id="results" style="margin-top: 15px; background: #f5f5f5; padding: 10px;"></div>
<script>
function showAllOrigins() {
var link1 = document.getElementById("link1").origin;
var link2 = document.getElementById("link2").origin;
var link3 = document.getElementById("link3").origin;
var output = "<strong>Origins:</strong><br>";
output += "Link 1: " + link1 + "<br>";
output += "Link 2: " + link2 + "<br>";
output += "Link 3: " + link3;
document.getElementById("results").innerHTML = output;
}
</script>
</body>
</html>
Clicking the button displays the origin of each link −
Different URL Origins HTTPS without port (link) HTTP with port (link) FTP protocol (link) [Show All Origins] Origins: Link 1: https://www.example.com Link 2: http://localhost:3000 Link 3: ftp://files.example.com
Key Points
- The
originproperty is read-only and cannot be modified directly. - For HTTPS URLs on default port 443 and HTTP URLs on default port 80, the port number is omitted from the origin.
- The origin includes the protocol scheme with the colon but without the double slashes.
- If the anchor element has no href attribute or an invalid URL, the origin may return an empty string or null.
- This property is useful for security checks and cross-origin resource sharing (CORS) validations.
Browser Compatibility
The origin property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It provides consistent behavior across different platforms for extracting the origin portion of URLs.
Conclusion
The HTML DOM Anchor origin property is a useful read-only property that extracts the protocol, hostname, and port from an anchor element's URL. It simplifies URL parsing for security validations and provides a clean way to identify the origin of linked resources without manually parsing the full href attribute.
183 Views
