URL relatif ke nomor port lain di hyperlink?

136

Apakah ada cara tanpa skrip Javascript / sisi server untuk menautkan ke nomor port yang berbeda pada kotak yang sama, jika saya tidak tahu nama host?

misalnya:

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

(Contoh ini tidak berfungsi karena hanya akan memperlakukan: 8080 sebagai string yang ingin saya navigasikan)

html Ciaran McNulty
sumber

stackoverflow.com/questions/8317059/relative-path-but-for-port Lihat ini ... ini bekerja untuk saya

Karena banyak orang di bawah ini menumpuk dengan solusi sisi server, NGINX $http_hostvar berfungsi, misalnya: return 200 '<html><body><iframe id="ic" src="http://$http_host:2812/"></iframe></body></html>yaitu dalam sebuah /etc/nginx/conf.d/strange.conffile.

MarkHu

52

Akan lebih baik jika ini bisa bekerja, dan saya tidak melihat mengapa tidak karena :merupakan karakter cadangan untuk pemisahan port di dalam komponen URI, sehingga browser dapat secara realistis menafsirkan ini sebagai port relatif terhadap URL ini, tetapi sayangnya itu tidak t dan tidak ada cara untuk melakukan itu.

Karena itu, Anda perlu Javascript untuk melakukan ini;

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

Diuji dalam Firefox 4

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

Pembaruan : Bug yang diperbaiki untuk menambahkan port ke akhir url dan juga menambahkan dukungan untuk url relatif dan absolut untuk ditambahkan ke akhir:

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

Gary Green
sumber

1

jadi tanpa javascript tidak ada solusi sejati

Daniel Ruf

2

Tidak ada cara untuk melakukan ini tanpa Javascript.

Gary Green

6

Ini tidak berfungsi di Safari 6. Masalahnya adalah Anda tidak menghapus port dari url relatif, sehingga Anda berakhir dengan sesuatu seperti http://myhost:8080/:8080untuk href=":8080". Anda dapat menambahkan baris ini di bawah `target.port = port [1];` untuk memperbaikinya. target.href = target.href.replace("/:"+target.port, "");(Ini bukan solusi yang sempurna, karena ini adalah

temuan

1

Solusi saya adalah membuat kelas ASP.NET yang menghasilkan URL. Ini pada dasarnya solusi yang sama seperti di atas, hanya sisi server.

rookie1024

7

Tolong jangan gunakan solusi ini . Ini sepenuhnya akan merusak klien tanpa Javascript, kemungkinan termasuk banyak perangkat aksesibilitas seperti pembaca layar. Hasilkan URL di sisi server sebagai gantinya.

Sven Slootweg

88

Bagaimana dengan ini:

Ubah nomor port saat klik:

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

Namun, jika Anda mengarahkan mouse ke tautan, itu tidak menunjukkan tautan dengan nomor port baru yang disertakan. Tidak sampai Anda mengkliknya itu menambahkan nomor port. Juga, jika pengguna mengklik kanan tautan dan melakukan "Salin Lokasi Tautan", mereka mendapatkan URL yang tidak dimodifikasi tanpa nomor port. Jadi ini tidak ideal.

Berikut adalah metode untuk mengubah URL setelah halaman dibuka, jadi dengan mengarahkan tautan atau melakukan "Salin Lokasi Tautan" akan mendapatkan URL yang diperbarui dengan nomor port:

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

Terima kasih telah menunjukkan peringatan, yang saya sadari. Dalam situasi saya, peringatan tidak terlalu penting, dan saya lebih suka kesederhanaan solusi pertama Anda. Saya hampir yakin bahwa saya sudah mengangkat jawaban Anda, tetapi perangkat lunak tampaknya tidak berpikir, dan mungkin memori perangkat lunak lebih dapat diandalkan daripada milik saya. Saya sudah memutarnya (lagi ??).

Kevin Walker

Saya telah memecahkan misteri itu: Saya secara tidak sengaja menaikkan salah satu jawaban yang lain sebagai gantinya. Ups. Saya tidak memiliki reputasi yang cukup untuk membalikkan kesalahan saya yang tidak disengaja.

Kevin Walker

<a href="#" onclick="javascript:event.target.port=8888">port 8888</a>seharusnya tidak berfungsi secara teknis, sesuai dengan spesifikasi w3 . event.targetseharusnya readonly. Tapi sepertinya itu bekerja untuk saya di Chrome dan Firefox!

JamesThomasMoon1979

Satu solusi liner sangat bagus! +1

Piotr Kula

Terima kasih. Saya suka solusi kedua Anda karena saya dapat mengatur href elemen dalam HTML sebagai mundur ke URI yang paling mungkin.

Duncan X Simpson

56

Anda dapat melakukannya dengan mudah menggunakan document.write dan URL akan ditampilkan dengan benar ketika Anda mengarahkan kursor ke sana. Anda juga tidak memerlukan ID unik menggunakan metode ini dan ini berfungsi dengan Chrome, FireFox dan IE. Karena kami hanya mereferensikan variabel dan tidak memuat skrip eksternal, menggunakan document.write di sini tidak akan memengaruhi kinerja pemuatan laman.

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

3

Sederhana dan elegan! Saya tidak tahu mengapa ini tidak memiliki lebih banyak suara - mungkin itu hanya terlambat.

Kevin H. Patterson

5

juga perhatikan, Anda tidak perlu memasukkan window.location.protocolbagian, cukup mulai dengan '//'.

kbrock

Kelihatannya mantap. Anggun.

Jay

Sangat praktis dan elegan.

Robert Lucian Chiriac

Hanya untuk mengatakan bahwa document.writehampir secara universal tidak direkomendasikan saat ini. Akan lebih baik untuk melakukan sesuatu sepertimyElement.innerHTML = '...'

mwfearnley

13

Ubah nomor port pada mouseover:

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

Ini merupakan peningkatan dari https://stackoverflow.com/a/13522508/1497139 yang tidak memiliki penarikan kembali karena tidak menampilkan tautan dengan benar.

Wolfgang Fahl
sumber

5

Tanpa JavaScript, Anda harus bergantung pada beberapa skrip sisi server. Misalnya, jika Anda menggunakan ASP, sesuatu seperti ...

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

harus bekerja. Namun, format yang tepat akan tergantung pada teknologi yang Anda gunakan.

gdt
sumber

4

Setelah bergulat dengan ini, saya benar-benar menemukan bahwa SERVER_NAME adalah variabel yang dipesan. Jadi, jika Anda berada di halaman (www.example.com:8080) Anda harus dapat menjatuhkan 8080 dan meminta port lain. Misalnya kode yang dimodifikasi ini hanya bekerja untuk saya dan memindahkan saya dari port dasar ke port 8069 (ganti port Anda sesuai kebutuhan)

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

Landis Arnold
sumber

1

Solusi PHP yang bagus! Anda dapat meninggalkan protokol sehingga terdeteksi otomatis:<a href="https://<?php print $_SERVER{'SERVER_NAME'}; ?>:8069">

ADTC

3

Lebih baik mendapatkan url dari variabel server:

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

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

T30
sumber

2

Tidak perlu javascript yang rumit: cukup masukkan node script setelah jangkar Anda, kemudian dapatkan node dalam javascript, dan modifikasi properti href -nya dengan metode window.location.origin .

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

Properti id harus lebar halaman unik, jadi Anda mungkin ingin menggunakan metode lain untuk mengambil objek node.

Diuji dengan apache dan Firefox di Linux.

MUY Belgia
sumber

Untuk beberapa alasan ini tidak cukup untuk saya arahkan browser untuk http//localhost:8081, perhatikan titik dua yang hilang. Saya baru saja menghapus bagian protokol karena Chrome mengasumsikan http.

joerick

Bagaimana Anda mengujinya?

MUY Belgium

1

Saya pikir ini seharusnya window.location.hostname. Lihat developer.mozilla.org/en-US/docs/Web/API/Location

mwfearnley

2

Solusi ini terlihat lebih bersih bagi saya

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

a_rahmanshah
sumber

1

Berdasarkan jawaban Gary Hole , tetapi perubahan url pada memuat halaman alih-alih pada klik.

Saya ingin menunjukkan url menggunakan css:

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

Jadi saya membutuhkan href anchor untuk dikonversi agar mengandung url aktual yang akan dikunjungi.

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

Panggil fungsi di atas saat memuat halaman.

atau pada satu baris:

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

(Saya menggunakan forbukannya forEachitu berfungsi di IE7.)

Sam Hasler
sumber

0

Tidak ada jawaban yang saya lihat (dan saya akan mengatakan, saya tidak membaca semuanya) sesuaikan URL sehingga klik tengah atau "buka di tab baru" akan berfungsi dengan baik - hanya klik biasa untuk mengikuti tautan. Saya meminjam dari jawaban Gary Greene, dan alih-alih menyesuaikan URL saat itu, kami dapat menyesuaikannya saat halaman dimuat:

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

URL relatif ke nomor port lain di hyperlink?

Jawaban: