Относительный URL для другого номера порта в гиперссылке?
Есть ли способ без скриптов Javascript/server-side для ссылки на другой номер порта в том же поле, если я не знаю имя хоста? например:.
(Этот пример не работает, поскольку он будет просто обрабатывать: 8080 как строку, к которой я хочу перейти)
Поскольку многие пользователи ниже используют решения на стороне сервера, NGINX $http_host var работает, например: return 200 ‘
например, в файле /etc/nginx/conf.d/strange.conf .9 ответов
Было бы неплохо, если бы это могло сработать, и я не понимаю, почему не потому, что : является зарезервированным символом для разделения портов внутри компонента URI, поэтому браузер может реально интерпретировать это как порт относительно этого URL-адреса, но, к сожалению, этого нет, и нет никакого способа сделать это.
Для этого вам понадобится Javascript,
// 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 = port[2]; target.port = port[1]; >> >, false); Протестировано в Firefox 4
Обновить. Исправлена ошибка добавления порта в конец URL-адреса, а также добавлена поддержка относительных и абсолютных URL-адресов для добавления в конец:
Это не сработало в Safari 6. Проблема в том, что вы не удаляете порт из относительного URL, поэтому в итоге вы получите что-то вроде http://myhost:8080/:8080 для href=»:8080″ . Вы можете добавить эту строку в `target.port = port [1];`, чтобы это исправить. target.href = target.href.replace(«/:»+target.port, «»); (Это не идеальное решение, так как это поиск / замена, но это хорошо для простых случаев, когда вы не беспокоитесь о наличии строки порта в URL.)
Было бы лучше сделать это во время загрузки страницы, поэтому URL-адрес отображается правильно, когда вы наводите курсор мыши на ссылку.
Моим решением было создать класс ASP.NET, который генерирует URL. По сути, это то же решение, что и выше, только на стороне сервера.
Пожалуйста , не используйте это решение . Он будет полностью разорвать на клиентов без Javascript, скорее всего , в том числе много доступности устройств , как для чтения с экрана. Вместо этого создайте URL-адреса на стороне сервера.
Измените номер порта при нажатии:
Однако, если вы наведите указатель мыши на ссылку, она не покажет ссылку с новым номером порта. Пока вы не нажмете на него, что он добавит номер порта. Кроме того, если пользователь щелкает правой кнопкой мыши по ссылке и выполняет «Копировать местоположение ссылки», они получают неизмененный URL-адрес без номера порта. Так что это не идеально.
Вот способ изменения URL-адреса сразу после загрузки страницы, поэтому при наведении указателя мыши на ссылку или «Копировать местоположение ссылки» вы получите обновленный URL-адрес с номером порта:
Look at another port Спасибо за указание на предостережения, о которых я знал. В моей ситуации предостережения не очень важны, и я предпочитаю простоту вашего первого решения. Я был почти уверен, что уже проголосовал против вашего ответа, но программное обеспечение, кажется, думает, что нет, и, вероятно, память программного обеспечения более надежна, чем моя. Я проголосовал за это (снова ??).
Я разгадал тайну: вместо этого я случайно проголосовал за один из других ответов. К сожалению. У меня недостаточно репутации, чтобы отменить мой случайный ответ.
port 8888 технически не должен работать, согласно спецификациям w3 . event.target должен быть только для readonly . Но, похоже, у меня работает в Chrome и Firefox!
Благодарю. Мне нравится ваше второе решение, потому что я могу установить href элемента в HTML как запасной вариант к наиболее вероятному URI.
Я смог использовать метод body onload=»setHref()» для динамического обновления iframe src= на моей странице. Спасибо!
Вы можете сделать это легко, используя document.write, и URL будет отображаться правильно, когда вы наводите на него курсор. Этот метод также не нужен, и он работает с Chrome, FireFox и IE. Поскольку мы ссылаемся только на переменные и не загружаем внешние скрипты, использование здесь document.write не будет влиять на производительность загрузки страницы.
Просто и элегантно! Я не знаю, почему у этого нет большего количества голосов — возможно, это просто опоздавший.
также обратите внимание, что вам не нужно включать часть window.location.protocol , просто начинайте с ‘//’ .
relative html links for port numbers?
I have a unique situation I think, google isn’t telling me much. I want to have a way to have a hyperlink in html to simply go to: http://:8081 http://:8080 When the page itself is running on port 80. This would usually be easy, however this is being developed as a virtual appliance to run offline on our sales teams machines, and as such the IP address will always be different dependant on the machine its running on. I also cannot use DNS for this. Afaik, it is impossible to have a relative hyperlink to link to another port. I then thought I could perhaps just link to «./site1» and «./site2» and then use mod_rewrite to write those links to the right port. Does anyone know how to do this? I went do it and got stuck when I realised I wanted to rewrite the URL to a static IP which I can’t do! (apache or nginx rewrite rules, or any other solution very welcome!)
Sorry.. serverfault didn’t like my links. That shoudl read:
http://:8081 http://:8080
I’m confused by your requirement. If it is always running offline (I assume on the same PC that is offline) then you would want the link to be localhost:8080 for example, localhost would always point to the local machine.
Sorry I should have added that the guest VM is running the webserver (CentOS). The sales guys would access the website from the host (Mac)
I have to admit, I have no idea what you are actually trying to do. If the server is listening on port 80, why are you trying to rewrite to another port?
Relative Path, but for Port?
We are all familiar with relative paths: A relative path to ./images/hello.jpg from http://www.domain.com/hey links to http://www.domain.com/hey/images/hello.jpg . Problem: How do you state a relative path to http://www.domain.com:1234 when you are at http://www.domain.com/hey ?
I don’t think you can. The port is effectively part of the domain name in this context. By specifying the domain name without the port (not using a relative link) you are basically supplying a different domain.
4 Answers 4
You cannot change any part of the authority (i.e. the host:port part) in relative URLs. See the algorithm described in section 5.2.2 of RFC 3986 to see how relative URLs are interpreted. Important thing to notice is that authority is simply copied from base URL or from the URL being resolved and authority’s structure is never interpreted. This implies that you cannot change any of its parts, including the port part.
Here’s the algorithm in pseudo-code copied from the RFC:
-- The URI reference is parsed into the five URI components -- (R.scheme, R.authority, R.path, R.query, R.fragment) = parse(R); -- A non-strict parser may ignore a scheme in the reference -- if it is identical to the base URI's scheme. -- if ((not strict) and (R.scheme == Base.scheme)) then undefine(R.scheme); endif; if defined(R.scheme) then T.scheme = R.scheme; T.authority = R.authority; T.path = remove_dot_segments(R.path); T.query = R.query; else if defined(R.authority) then T.authority = R.authority; T.path = remove_dot_segments(R.path); T.query = R.query; else if (R.path == "") then T.path = Base.path; if defined(R.query) then T.query = R.query; else T.query = Base.query; endif; else if (R.path starts-with "/") then T.path = remove_dot_segments(R.path); else T.path = merge(Base.path, R.path); T.path = remove_dot_segments(T.path); endif; T.query = R.query; endif; T.authority = Base.authority; endif; T.scheme = Base.scheme; endif; T.fragment = R.fragment; Html – Relative URL to a different port number in a hyperlink
Is there a way without Javascript / server-side scripting to link to a different port number on the same box, if I don’t know the hostname?
(This example does’t work as it’ll just treat :8080 as a string I want to navigate to)
Best Solution
Modify the port number on click:
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:
Related Solutions
Javascript – How to change the href attribute for a hyperlink using jQuery
$("a").attr("href", "http://www.google.com/") will modify the href of all hyperlinks to point to Google. You probably want a somewhat more refined selector though. For instance, if you have a mix of link source (hyperlink) and link target (a.k.a. «anchor») anchor tags:
. Then you probably don’t want to accidentally add href attributes to them. For safety then, we can specify that our selector will only match tags with an existing href attribute:
Of course, you’ll probably have something more interesting in mind. If you want to match an anchor with a specific existing href , you might use something like this:
$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/') This will find links where the href exactly matches the string http://www.google.com/ . A more involved task might be matching, then updating only part of the href :
$("a[href^='http://stackoverflow.com']") .each(function() < this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, "http://stackoverflow.com"); >); The first part selects only links where the href starts with http://stackoverflow.com . Then, a function is defined that uses a simple regular expression to replace this part of the URL with a new one. Note the flexibility this gives you — any sort of modification to the link could be done here.
Javascript – Retrieve the position (X,Y) of an HTML element
var rect = element.getBoundingClientRect(); console.log(rect.top, rect.right, rect.bottom, rect.left); Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views. All other browsers adopted it a long time ago.
Some browsers also return height and width properties, though this is non-standard. If you’re worried about older browser compatibility, check this answer’s revisions for an optimised degrading implementation.
The values returned by element.getBoundingClientRect() are relative to the viewport. If you need it relative to another element, simply subtract one rectangle from the other:
var bodyRect = document.body.getBoundingClientRect(), elemRect = element.getBoundingClientRect(), offset = elemRect.top - bodyRect.top; alert('Element is ' + offset + ' vertical pixels from ');