URL relativo para um número de porta diferente em um hiperlink?

136

Existe uma maneira sem o Javascript / script do lado do servidor vincular a um número de porta diferente na mesma caixa, se eu não souber o nome do host?

por exemplo:

<a href=":8080">Look at the other port</a>

(Este exemplo não funciona, pois tratará apenas: 8080 como uma string para a qual desejo navegar)

html Ciaran McNulty
fonte

stackoverflow.com/questions/8317059/relative-path-but-for-port verificar isso ... ele trabalhou para mim

Como muitas pessoas abaixo se amontoaram em soluções do lado do servidor, o NGINX $http_hostvar funciona, por exemplo: return 200 '<html><body><iframe id="ic" src="http://$http_host:2812/"></iframe></body></html>em um /etc/nginx/conf.d/strange.confarquivo.

MarkHu 27/05

52

Seria bom se isso funcionasse, e não vejo por que não, porque :é um caractere reservado para a separação de portas dentro do componente URI, para que o navegador possa interpretá-lo realisticamente como uma porta relativa a este URL, mas infelizmente não ' te não há como fazer isso.

Portanto, você precisará de Javascript para fazer isso;

// 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);

Testado no Firefox 4

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

Atualização : Corrigido o erro ao anexar a porta ao final da URL e também adicionava suporte para URLs relativas e absolutas a serem anexadas ao final:

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

Gary Green
fonte

1

portanto, sem javascript, não há solução verdadeira #

Daniel Ruf

2

Não há como fazer isso sem Javascript.

Gary Green

6

Isso não funcionou no Safari 6. O problema é que você não está removendo a porta do URL relativo e, portanto, acaba criando algo parecido http://myhost:8080/:8080com href=":8080". Você pode adicionar esta linha em `target.port = port [1];` para corrigir isso. target.href = target.href.replace("/:"+target.port, "");(Não é uma solução perfeita, já que é um achado / substituir, mas é bom para casos simples onde você não está preocupado com a porta-string estar na URL.)

zekel

1

Minha solução foi criar uma classe ASP.NET que gere a URL. É essencialmente a mesma solução acima, apenas do lado do servidor.

rookie1024

7

Por favor , não use esta solução . Ele quebrará completamente em clientes sem Javascript, provavelmente incluindo muitos dispositivos de acessibilidade, como leitores de tela. Gere os URLs no lado do servidor.

Sven Slootweg

88

Que tal estes:

Modifique o número da porta ao clicar:

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

No entanto, se você passar o mouse sobre o link, ele não mostrará o link com o novo número da porta incluído. Não é até você clicar nele que ele adiciona o número da porta. Além disso, se o usuário clicar com o botão direito do mouse no link e copiar "Local do link", ele obterá o URL não modificado sem o número da porta. Então, isso não é o ideal.

Aqui está um método para alterar o URL logo após o carregamento da página. Passar o mouse sobre o link ou fazer "Copiar local do link" obterá o URL atualizado com o número da porta:

<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="/other/" id="modify-me">Look at another port</a>
</body>
</html>

Craig McQueen
fonte

Obrigado por apontar as advertências, das quais eu estava ciente. Na minha situação, as advertências não são muito importantes e prefiro a simplicidade da sua primeira solução. Eu tinha quase certeza de que já havia votado sua resposta, mas o software parece achar que não, e provavelmente a memória do software é mais confiável que a minha. Eu votei novamente (de novo?).

Kevin Walker

Eu resolvi o mistério: acidentalmente votei em uma das outras respostas. Opa Não tenho reputação suficiente para reverter meu voto acidental.

Kevin Walker

<a href="#" onclick="javascript:event.target.port=8888">port 8888</a>tecnicamente não deve funcionar, de acordo com as especificações da w3 . event.targetdeveria ser readonly. Mas parece funcionar para mim no Chrome e Firefox!

JamesThomasMoon1979

Uma solução de revestimento é ótima! +1

Piotr Kula

Obrigado. Gosto da sua segunda solução porque posso definir o href do elemento no HTML como um substituto para o URI mais provável.

Duncan X Simpson

56

Você pode fazer isso facilmente usando document.write e o URL será exibido corretamente quando você passar o mouse sobre ele. Você também não precisa de um ID exclusivo usando esse método e ele funciona com Chrome, FireFox e IE. Como estamos referenciando apenas variáveis e não carregando scripts externos, o uso de document.write aqui não afetará o desempenho do carregamento da página.

<script language="JavaScript">
document.write('<a href="' + window.location.protocol + '//' + window.location.hostname + ':8080' + window.location.pathname + '" >Link to same page on port 8080:</a> ' );
</script>

Kurt Schultz
fonte

3

Simples e elegante! Não sei por que isso não tem mais votos - talvez seja apenas um retardatário.

Kevin H. Patterson

5

Observe também que você não precisa incluir window.location.protocolparte, apenas começando com '//'.

kbrock 16/09/15

Parece legítimo. Elegante.

Jay

Real acessível e elegante.

Robert Lucian Chiriac

Só para dizer que document.writeé praticamente universalmente não recomendado hoje em dia. Seria melhor fazer algo comomyElement.innerHTML = '...'

mwfearnley 23/03

13

Modifique o número da porta na passagem do mouse:

<a href="/other/" onmouseover="javascript:event.target.port=8080">Look at another port</a>

Esta é uma melhoria do https://stackoverflow.com/a/13522508/1497139, que não tem a desvantagem de não mostrar o link corretamente.

Wolfgang Fahl
fonte

5

Sem JavaScript, você precisará confiar em alguns scripts do lado do servidor. Por exemplo, se você estiver usando ASP, algo como ...

<a href="<%=Request.ServerVariables("SERVER_NAME")%>:8080">Look at the other port</a>

Deveria trabalhar. No entanto, o formato exato dependerá da tecnologia que você está usando.

gdt
fonte

4

Depois de lutar com isso, descobri que SERVER_NAME é uma variável reservada. Portanto, se você estiver na página (www.example.com:8080), poderá eliminar o 8080 e chamar outra porta. Por exemplo, esse código modificado funcionou para mim e me move de qualquer porta base para a porta 8069 (substitua sua porta conforme necessário)

<div>
    <a href="http://<?php print
    $_SERVER{'SERVER_NAME'}; ?>:8069"><img
    src="images/example.png"/>Example Base (http)</a>
</div>

Landis Arnold
fonte

1

Boa solução PHP! Você pode deixar de fora o protocolo para que ele seja detectado automaticamente:<a href="https://<?php print $_SERVER{'SERVER_NAME'}; ?>:8069">

ADTC

3

É melhor obter o URL das variáveis do servidor:

// PHP:
<a href="<?=$_SERVER['SERVER_NAME']?>:8080/index.php">

// ASP.net
<a href='<%=Request.ServerVariables("SERVER_NAME")%>:8080/index.asp'>

T30
fonte

2

Não há necessidade de javascript complicado: basta inserir um nó de script após sua âncora, depois obter o nó em javascript e modificar sua propriedade href com o método window.location.origin .

 <a id="trans">Look at the other port</a>
 <script>
      document.getElementById('trans').href='http://'+window.location.origin+':8081';
 </script>

A propriedade id deve ter uma página exclusiva, portanto, convém usar outro método para recuperar objetos do nó.

Testado com apache e Firefox no Linux.

MUY Bélgica
fonte

Por alguma razão, isso não funcionou bem para mim - ele direcionou o navegador para http//localhost:8081, observe os dois pontos ausentes. Acabei de remover completamente a parte do protocolo, pois o Chrome assumiu o http de qualquer maneira.

joerick

Como você testou?

MUY Belgium

1

Eu acho que deveria ser assim window.location.hostname. Veja developer.mozilla.org/pt-BR/docs/Web/API/Location

mwfearnley

2

Esta solução parece mais limpa para mim

<a href="#"  
    onclick="window.open(`${window.location.hostname}:8080/someMurghiPlease`)">
    Link to some other port on the same host
  </a>

a_rahmanshah
fonte

1

Baseado na resposta de Gary Hole , mas altera os URLs no carregamento da página em vez de clicar.

Eu queria mostrar o URL usando css:

a:after {
  content: attr(href);
}

Então, eu precisava que o href da âncora fosse convertido para conter o URL real que seria visitado.

function fixPortUrls(){
  var nodeArray = document.querySelectorAll('a[href]');
  for (var i = 0; i < nodeArray.length; i++) {
    var a = nodeArray[i];
    // a -> e.g.: <a href=":8080/test">Test</a>
    var port = a.getAttribute('href').match(/^:(\d+)(.*)/);
    //port -> ['8080','/test/blah']
    if (port) {
      a.href = port[2]; //a -> <a href="https://stackoverflow.com/test">Test</a>
      a.port = port[1]; //a -> <a href="http://localhost:8080/test">Test</a>
    }
  }
}

Chame a função acima no carregamento da página.

ou em uma linha:

function fixPortUrls(){var na=document.querySelectorAll('a[href]');for(var i=0;i<na.length;i++){var a=na[i];var u=a.getAttribute('href').match(/^:(\d+)(.*)/);u&&a.href=u[2]&&a.port=u[1];}}

(Estou usando em forvez de, forEachportanto, funciona no IE7.)

Sam Hasler
fonte

0

Nenhuma das respostas que eu olhei (e direi que não li todas) ajusta o URL para que um clique do meio ou "abrir em nova guia" funcione corretamente - apenas um clique regular para seguir o link. Peguei emprestado a resposta de Gary Greene e, em vez de ajustar o URL on-the-fly, podemos ajustá-lo quando a página carregar:

...
<script>
function rewriteRelativePortUrls() {
    var links = document.getElementsByTagName("a");
    for (var i=0,max=links.length; i<max; i++)
    {
        var port = links[i].getAttribute("href").match(/^:(\d+)(.*)/);
        if (port)
        {
            newURL = window.location.origin + port[0]
            links[i].setAttribute("href",newURL)
        }    
    }
}

</script>
<body onload="rewriteRelativePortUrls()">
...

ddiepo
fonte

URL relativo para um número de porta diferente em um hiperlink?

Respostas: