Czy istnieje sposób bez JavaScript / skryptów po stronie serwera, aby połączyć się z innym numerem portu w tym samym polu, jeśli nie znam nazwy hosta?
na przykład:
<a href=":8080">Look at the other port</a>
(Ten przykład nie działa, ponieważ po prostu potraktuje: 8080 jako ciąg, do którego chcę przejść)
$http_hostvar działa, np. return 200 '<html><body><iframe id="ic" src="http://$http_host:2812/"></iframe></body></html>W /etc/nginx/conf.d/strange.confpliku.
Odpowiedzi:
Byłoby miło, gdyby to zadziałało, a nie rozumiem, dlaczego nie, ponieważ :jest to zastrzeżony znak do separacji portów w składniku URI, więc przeglądarka mogłaby realistycznie zinterpretować to jako port w odniesieniu do tego adresu URL, ale niestety tak nie jest. t i nie da się tego zrobić.
Dlatego będziesz potrzebować do tego 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 = window.location.origin;
target.port = port[1];
}
}
}, false);
Przetestowano w przeglądarce Firefox 4
Skrzypce: http://jsfiddle.net/JtF39/79/
Aktualizacja : Naprawiono błąd związany z dołączaniem portu do końca adresu URL, a także dodano obsługę względnych i bezwzględnych adresów URL, które mają być dołączane na końcu:
<a href=":8080/test/blah">Test absolute</a>
<a href=":7051./test/blah">Test relative</a>
http://myhost:8080/:8080for href=":8080". Możesz dodać tę linię w `target.port = port [1];`, aby to naprawić. target.href = target.href.replace("/:"+target.port, "");(Nie jest to idealne rozwiązanie, ponieważ jest to znajdź / zamień, ale jest dobre w prostych przypadkach, w których nie martwisz się, że ciąg portu znajduje się w adresie URL.)
Co powiesz na te:
Zmień numer portu po kliknięciu:
<a href="/other/" onclick="javascript:event.target.port=8080">Look at another port</a>
Jeśli jednak najedziesz kursorem myszy na łącze, nie wyświetli się łącza z dołączonym nowym numerem portu. Dopiero gdy go klikniesz, doda numer portu. Ponadto, jeśli użytkownik kliknie łącze prawym przyciskiem myszy i wykona polecenie „Kopiuj adres łącza”, otrzyma niezmodyfikowany adres URL bez numeru portu. Więc to nie jest idealne.
Oto metoda zmiany adresu URL zaraz po załadowaniu strony, więc umieszczenie kursora myszy nad linkiem lub wykonanie polecenia „Kopiuj adres odnośnika” spowoduje wyświetlenie zaktualizowanego adresu URL z numerem portu:
<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>
<a href="#" onclick="javascript:event.target.port=8888">port 8888</a>powinien technicznie nie działać, zgodnie ze specyfikacjami w3 . event.targetma być readonly. Ale wydaje mi się, że działa na mnie w Chrome i Firefox!
Możesz to łatwo zrobić za pomocą document.write, a adres URL będzie wyświetlany poprawnie po najechaniu na niego kursorem. Nie potrzebujesz również unikalnego identyfikatora przy użyciu tej metody i działa ona z przeglądarkami Chrome, FireFox i IE. Ponieważ odwołujemy się tylko do zmiennych i nie ładujemy żadnych zewnętrznych skryptów, użycie document.write w tym miejscu nie wpłynie na wydajność ładowania strony.
<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>
window.location.protocolczęści, wystarczy zacząć od '//'.
document.writedzisiejszych czasach jest to mało zalecane. Lepiej byłoby zrobić coś takiegomyElement.innerHTML = '...'
Zmień numer portu po najechaniu myszą:
<a href="/other/" onmouseover="javascript:event.target.port=8080">Look at another port</a>
Jest to ulepszenie https://stackoverflow.com/a/13522508/1497139, które nie ma tej strony, że nie wyświetla poprawnie linku.
Po zmaganiach z tym stwierdziłem, że SERVER_NAME jest zarezerwowaną zmienną. Więc jeśli jesteś na stronie (www.example.com:8080), powinieneś być w stanie porzucić 8080 i wywołać inny port. Na przykład ten zmodyfikowany kod po prostu działał dla mnie i przenosi mnie z dowolnego portu podstawowego do portu 8069 (w razie potrzeby wymień port)
<div>
<a href="http://<?php print
$_SERVER{'SERVER_NAME'}; ?>:8069"><img
src="images/example.png"/>Example Base (http)</a>
</div>
<a href="https://<?php print $_SERVER{'SERVER_NAME'}; ?>:8069">
Nie ma potrzeby stosowania skomplikowanego javascript: po prostu wstaw węzeł skryptu po zakotwiczeniu, następnie pobierz węzeł w javascript i zmodyfikuj jego właściwość href za pomocą metody window.location.origin .
<a id="trans">Look at the other port</a>
<script>
document.getElementById('trans').href='http://'+window.location.origin+':8081';
</script>
Właściwość id musi być unikalna na całej stronie, więc możesz chcieć użyć innej metody do pobierania obiektów węzłów.
Testowane z Apache i Firefox w systemie Linux.
http//localhost:8081, zwróć uwagę na brakujący dwukropek. Właśnie całkowicie usunąłem część protokołu, ponieważ Chrome i tak założył http.
window.location.hostnamezamiast tego. Zobacz developer.mozilla.org/en-US/docs/Web/API/Location
To rozwiązanie wydaje mi się czystsze
<a href="#"
onclick="window.open(`${window.location.hostname}:8080/someMurghiPlease`)">
Link to some other port on the same host
</a>
Na podstawie odpowiedzi Gary'ego Hole'a , ale zmienia adresy URL po załadowaniu strony zamiast po kliknięciu.
Chciałem pokazać URL za pomocą css:
a:after {
content: attr(href);
}
Potrzebowałem więc przekonwertować href kotwicy, aby zawierał rzeczywisty adres URL, który miał być odwiedzany.
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>
}
}
}
Wywołaj powyższą funkcję podczas ładowania strony.
lub w jednej linii:
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];}}
(Używam forzamiast, forEachwięc działa w IE7.)
Żadna z odpowiedzi, na które patrzyłem (i powiem, że nie przeczytałem ich wszystkich) nie dostosowuje adresu URL tak, aby środkowe kliknięcie lub „otwórz w nowej karcie” działało poprawnie - wystarczy zwykłe kliknięcie, aby przejść do linku. Zapożyczyłem z odpowiedzi Gary'ego Greene'a i zamiast dostosowywać adres URL w locie, możemy go dostosować podczas ładowania strony:
...
<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()">
...