Relative Url to a Different Port Number in a Hyperlink

Relative URL to a different port number in a hyperlink?

It would be nice if this could work, and I don't see why not because : is a reserved character for port separation inside the URI component, so the browser could realistically interpret this as a port relative to this URL, but unfortunately it doesn't and there's no way for it to do that.

You'll therefore need Javascript to do this;

// delegate event for performance, and save attaching a million events to each anchor
document.addEventListener('click', function(event) {
var target = event.target;
if (target.tagName.toLowerCase() == 'a')
{
var port = target.getAttribute('href').match(/^:(\d+)(.*)/);
if (port)
{
target.href = window.location.origin;
target.port = port[1];
}
}
}, false);

Tested in Firefox 4

Fiddle: http://jsfiddle.net/JtF39/79/


Update: Bug fixed for appending port to end of url and also added support for relative and absolute urls to be appended to the end:

<a href=":8080/test/blah">Test absolute</a>
<a href=":7051./test/blah">Test relative</a>

How do I do a href to port?

you can add the local domain\host use one of the php server variables either:
$_SERVER['HTTP_HOST'] or $_SERVER['SERVER_NAME']

IE:

<li><a href="http://<?php echo $_SERVER['HTTP_HOST']; ?>:8123">Earth</a></li>

Relative Path, but for Port?

This can be achieved using JavaScript by setting the window.location.port property.

<a href="#" onclick="javascript:window.location.port=8080">go</a>

Create an HTML link to a file in another port?

See here -> https://stackoverflow.com/a/6016361/773263

// delegate event for performance,
// and save attaching a million events to each anchor
document.addEventListener('click', function(event) {
var target = event.target;
if (target.tagName.toLowerCase() == 'a')
{
var port = target.getAttribute('href')
.match(/^:(\d+)$/);
if (port)
{
target.port = port[1];
}
}
}, false);

Seems to be the best way to do it. I don't think a purely HTML solution is possible.

script src using relative path and a different port

@Cue made me realize there is a solution in the linked question, using Craig McQueen's second suggestion, I can get the path.

const script = document.createElement('script');
const scriptSrc = (window.location.protocol + '//' +
window.location.hostname +
':8000/same/host/different/port.js');
script.setAttribute('src', scriptSrc);
document.head.appendChild(script);

How to explicitly state the port number in an absolute URL?

The port comes directly after the hostname, separated by :.

http://example.com:80/
http://example.com:80/path

Relevant specifications:

  • IETF’s URI standard: port subcomponent (part of the authority component)

  • WHATWG’s URL standard: scheme-relative-special-URL string

Scheme relative URL

The browser will try to open the URL using the same scheme it's currently on; if it's currently on HTTPS, it will request the URL with HTTPS and vice versa for HTTP. If the target server does not support that scheme, it will simply fail. In case of a server which only supports HTTPS, that usually means that it enforces HTTPS; if you make an HTTP query to that server it often simply redirects to the HTTPS version of the same page. That's entirely up to the server to do though.

If a server only supports HTTP, that usually means that it doesn't have HTTPS at all. In that case an HTTPS request would simply fail and the browser will display an error message along the lines of "couldn't establish a secure connection/couldn't connect to server".

Hyperlink url contains localhost and port number

When you are redirecting to the URL, you will not be adding any protocol information, so it will default to the current website/protocol.

For example;

Response.Redirect("www.google.com")

is not the same as;

Response.Redirect("http://www.google.com")

You need to add the fully qualified URL, otherwise it will believe it to berelative to the current website, therefore add the http(s):// to the redirect.



Related Topics



Leave a reply



Submit