Relative URL to a different port number in a hyperlink?

How about these:

Modify the port number on click:

<a href="https://stackoverflow.com/other/" onclick="javascript:event.target.port=8080">Look at another port</a>

However, if you hover your mouse over the link, it doesn’t show the link with new port number included. It’s not until you click on it that it adds the port number. Also, if the user right-clicks on the link and does “Copy Link Location”, they get the unmodified URL without the port number. So this isn’t ideal.

Here is a method to change the URL just after the page loads, so hovering over the link or doing “Copy Link Location” will get the updated URL with the port number:

<html>
<head>
<script>
function setHref() {
document.getElementById('modify-me').href = window.location.protocol + "//" + window.location.hostname + ":8080/other/";
}
</script>
</head>

<body onload="setHref()">
<a href="https://stackoverflow.com/other/" id="modify-me">Look at another port</a>
</body>
</html>

Leave a Comment