Relative URL zu einer anderen Portnummer in einem Hyperlink?

135

Gibt es eine Möglichkeit ohne Javascript / serverseitiges Scripting, eine Verknüpfung zu einer anderen Portnummer auf derselben Box herzustellen, wenn ich den Hostnamen nicht kenne?

z.B:

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

(Dieses Beispiel funktioniert nicht, da es nur Folgendes behandelt: 8080 als Zeichenfolge, zu der ich navigieren möchte.)

html

— Ciaran McNulty
quelle

stackoverflow.com/questions/8317059/relative-path-but-for-port Überprüfen Sie dies ... es hat bei mir

Da viele Leute unten mit serverseitigen Lösungen beschäftigt sind, $http_hostfunktioniert die NGINX-Variable , z. B.: return 200 '<html><body><iframe id="ic" src="http://$http_host:2812/"></iframe></body></html>In einer /etc/nginx/conf.d/strange.confDatei.

— MarkHu

52

Es wäre schön, wenn dies funktionieren könnte, und ich verstehe nicht, warum nicht, da dies :ein reserviertes Zeichen für die Porttrennung innerhalb der URI-Komponente ist, sodass der Browser dies realistisch als Port relativ zu dieser URL interpretieren könnte, aber leider nicht. ' t und es gibt keine Möglichkeit dafür.

Sie benötigen daher Javascript, um dies zu tun.

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

In Firefox 4 getestet

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

Update : Fehler beim Anhängen des Ports an das Ende der URL behoben und Unterstützung für relative und absolute URLs hinzugefügt, die an das Ende angehängt werden sollen:

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

— Gary Green
quelle

1

Ohne Javascript gibt es also keine echte Lösung

— Daniel Ruf

1

Ohne Javascript ist dies nicht möglich.

— Gary Green

6

Dies hat in Safari 6 nicht funktioniert. Das Problem ist, dass Sie den Port nicht aus der relativen URL entfernen, sodass Sie am Ende etwas wie http://myhost:8080/:8080für erhalten href=":8080". Sie können diese Zeile unter `target.port = port [1];` hinzufügen, um dies zu beheben. target.href = target.href.replace("/:"+target.port, "");(Es ist keine perfekte Lösung, da es ein Suchen / Ersetzen ist, aber es ist gut für einfache Fälle, in denen Sie sich keine Sorgen über die Port-Zeichenfolge in der URL machen.)

— Zekel

1

Meine Lösung bestand darin, eine ASP.NET-Klasse zu erstellen, die die URL generiert. Es ist im Wesentlichen die gleiche Lösung wie oben, nur serverseitig.

— Rookie1024

7

Bitte verwenden Sie diese Lösung nicht . Auf Clients ohne Javascript wird es vollständig kaputt gehen , wahrscheinlich einschließlich vieler Eingabehilfen wie Bildschirmlesegeräte. Generieren Sie stattdessen die URLs auf der Serverseite.

— Sven Slootweg

88

Wie wäre es mit diesen:

Ändern Sie die Portnummer beim Klicken:

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

Wenn Sie jedoch mit der Maus über den Link fahren, wird der Link mit der neuen Portnummer nicht angezeigt. Erst wenn Sie darauf klicken, wird die Portnummer hinzugefügt. Wenn der Benutzer mit der rechten Maustaste auf den Link klickt und "Link Location kopieren" ausführt, erhält er die unveränderte URL ohne die Portnummer. Das ist also nicht ideal.

Hier ist eine Methode zum Ändern der URL direkt nach dem Laden der Seite. Wenn Sie also mit der Maus über den Link fahren oder "Link Location kopieren", wird die aktualisierte URL mit der Portnummer angezeigt:

<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
quelle

Vielen Dank für den Hinweis auf die Vorbehalte, die mir bekannt waren. In meiner Situation sind die Vorbehalte nicht sehr wichtig, und ich bevorzuge die Einfachheit Ihrer ersten Lösung. Ich war mir fast sicher, dass ich Ihre Antwort bereits positiv bewertet hatte, aber die Software scheint nicht zu denken, und wahrscheinlich ist der Speicher der Software zuverlässiger als meiner. Ich habe es (wieder ??) positiv bewertet.

— Kevin Walker

Ich habe das Rätsel gelöst: Ich habe stattdessen versehentlich eine der anderen Antworten positiv bewertet. Hoppla. Ich habe nicht genug Ruf, um meine versehentliche Gegenstimme rückgängig zu machen.

— Kevin Walker

<a href="#" onclick="javascript:event.target.port=8888">port 8888</a>sollte technisch nicht funktionieren, gemäß w3 Spezifikationen . event.targetsoll sein readonly. Aber es scheint für mich in Chrome und Firefox zu funktionieren!

— JamesThomasMoon1979

One-Liner-Lösung ist großartig! +1

— Piotr Kula

Vielen Dank. Ich mag Ihre zweite Lösung, weil ich die href des Elements im HTML als Fallback auf den wahrscheinlichsten URI setzen kann.

— Duncan X Simpson

55

Sie können dies problemlos mit document.write tun. Die URL wird korrekt angezeigt, wenn Sie den Mauszeiger darüber halten. Mit dieser Methode benötigen Sie auch keine eindeutige ID und sie funktioniert mit Chrome, FireFox und IE. Da wir nur auf Variablen verweisen und keine externen Skripte laden, hat die Verwendung von document.write hier keine Auswirkungen auf die Leistung beim Laden von Seiten.

<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
quelle

3

Einfach und elegant! Ich weiß nicht, warum dies nicht mehr Stimmen hat - vielleicht ist es nur ein Nachzügler.

— Kevin H. Patterson

5

Beachten Sie auch, dass Sie kein window.location.protocolTeil einschließen müssen, sondern erst mit beginnen '//'.

— Kbrock

Klingt plausibel. Elegant.

— Jay

Sehr praktisch und elegant.

— Robert Lucian Chiriac

Nur um zu sagen, dass document.writedies heutzutage so gut wie nicht mehr zu empfehlen ist. Es wäre besser, so etwas zu tunmyElement.innerHTML = '...'

— mwfearnley

13

Ändern Sie die Portnummer beim Mouseover:

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

Dies ist eine Verbesserung von https://stackoverflow.com/a/13522508/1497139, die nicht den Nachteil hat, dass der Link nicht korrekt angezeigt wird.

— Wolfgang Fahl
quelle

5

Ohne JavaScript müssen Sie sich auf serverseitige Skripte verlassen. Wenn Sie beispielsweise ASP verwenden, können Sie beispielsweise ...

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

sollte arbeiten. Das genaue Format hängt jedoch von der verwendeten Technologie ab.

— gdt
quelle

4

Nachdem ich damit gerungen hatte, stellte ich fest, dass SERVER_NAME eine reservierte Variable ist. Wenn Sie sich also auf einer Seite befinden (www.example.com:8080), sollten Sie in der Lage sein, den 8080 zu löschen und einen anderen Port aufzurufen. Zum Beispiel hat dieser geänderte Code nur für mich funktioniert und mich von einem beliebigen Basisport zu Port 8069 verschoben (ersetzen Sie Ihren Port nach Bedarf).

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

— Landis Arnold
quelle

1

Schöne PHP-Lösung! Sie können das Protokoll <a href="https://stackoverflow.com//<?php print $_SERVER{'SERVER_NAME'}; ?>:8069">

— weglassen

3

Es ist besser, die URL von den Servervariablen abzurufen:

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

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

— T30
quelle

2

Kein kompliziertes Javascript erforderlich: Fügen Sie einfach einen Skriptknoten nach Ihrem Anker ein, rufen Sie den Knoten in Javascript ab und ändern Sie seine href- Eigenschaft mit der window.location.origin- Methode.

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

Die Eigenschaft id muss seitenweit eindeutig sein, daher möchten Sie möglicherweise eine andere Methode zum Abrufen von Knotenobjekten verwenden.

Getestet mit Apache und Firefox unter Linux.

— MUY Belgien
quelle

Aus irgendeinem Grund funktionierte dies für mich nicht ganz - es wies den Browser an http//localhost:8081, den fehlenden Doppelpunkt zu beachten. Ich habe gerade den Protokollteil komplett entfernt, da Chrome sowieso http angenommen hat.

— Joerick

Wie hast du es getestet?

— MUY Belgien

1

Ich denke das sollte window.location.hostnamestattdessen sein. Siehe developer.mozilla.org/en-US/docs/Web/API/Location

— mwfearnley

2

Diese Lösung sieht für mich sauberer aus

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

— a_rahmanshah
quelle

1

Basierend auf der Antwort von Gary Hole , ändert jedoch die URLs beim Laden der Seite anstatt beim Klicken.

Ich wollte die URL mit CSS anzeigen:

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

Also musste die href des Ankers konvertiert werden, um die tatsächliche URL zu enthalten, die besucht werden würde.

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>
    }
  }
}

Rufen Sie beim Laden der Seite die obige Funktion auf.

oder in einer Zeile:

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];}}

(Ich benutze forstattdessen, forEachdamit es in IE7 funktioniert.)

— Sam Hasler
quelle

0

Keine der Antworten, die ich mir angesehen habe (und ich werde sagen, ich habe nicht alle gelesen), passt die URL so an, dass ein mittlerer Klick oder "In neuem Tab öffnen" ordnungsgemäß funktioniert - nur ein regulärer Klick, um dem Link zu folgen. Ich habe mir die Antwort von Gary Greene geliehen und anstatt die URL im laufenden Betrieb anzupassen, können wir sie anpassen, wenn die Seite geladen wird:

...
<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
quelle