Bir köprüdeki farklı bir bağlantı noktası numarasına göreli URL?

136

Ana bilgisayar adını bilmiyorsam, aynı kutudaki farklı bir bağlantı noktası numarasına bağlanmanın Javascript / sunucu tarafı komut dosyası olmadan bir yolu var mı?

Örneğin:

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

(Bu örnek, 8080'i gitmek istediğim bir dize olarak ele alacağı için çalışmaz)

html

— Ciaran McNulty
kaynak

stackoverflow.com/questions/8317059/relative-path-but-for-port

Aşağıdaki pek çok kişi sunucu tarafı çözümleriyle uğraştığından, NGINX $http_hostvar, örneğin: return 200 '<html><body><iframe id="ic" src="http://$http_host:2812/"></iframe></body></html>yani bir /etc/nginx/conf.d/strange.confdosyada çalışır.

— MarkHu

52

Bu işe yarayabilirse güzel olurdu ve neden olmadığını anlamıyorum çünkü :URI bileşeninin içindeki bağlantı noktası ayırma için ayrılmış bir karakter, bu nedenle tarayıcı bunu gerçekçi bir şekilde bu URL'ye göre bir bağlantı noktası olarak yorumlayabilir, ancak maalesef öyle değil ' t ve bunu yapmanın bir yolu yok.

Bu nedenle, bunu yapmak için Javascript'e ihtiyacınız olacak;

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

Firefox 4'te test edildi

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

Güncelleme : Bağlantı noktasını url'nin sonuna eklemeyle ilgili hata düzeltildi ve ayrıca sona eklenecek göreli ve mutlak URL'ler için destek eklendi:

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

— Gary Green
kaynak

1

bu yüzden javascript olmadan gerçek bir çözüm olamaz

— Daniel Ruf,

2

Bunu Javascript olmadan yapmanın bir yolu yok.

— Gary Green

6

Bu, Safari 6'da işe yaramadı. Sorun şu ki, bağlantı noktasını göreli url'den kaldırmıyorsunuz, bu yüzden http://myhost:8080/:8080için gibi bir şey elde ediyorsunuz href=":8080". Bunu düzeltmek için bu satırı "target.port = port [1];" altına ekleyebilirsiniz. target.href = target.href.replace("/:"+target.port, "");(Bu bir bul / değiştir olduğu için mükemmel bir çözüm değildir, ancak bağlantı noktası dizesinin URL'de olması konusunda endişelenmediğiniz basit durumlar için iyidir.)

— zekel

1

Çözümüm, URL'yi oluşturan bir ASP.NET sınıfı yapmaktı. Esasen yukarıdaki ile aynı çözüm, sadece sunucu tarafında.

— çaylak1024

7

Lütfen bu çözümü kullanmayın . Tamamen olacak kırmak olasılıkla ekran okuyucular gibi birçok erişilebilirlik cihazlar dahil, JavaScript olmadan istemcilerde. Bunun yerine sunucu tarafında URL'leri oluşturun.

— Sven Slootweg

88

Peki ya bunlar:

Tıklayarak bağlantı noktası numarasını değiştirin:

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

Ancak, farenizi bağlantının üzerine getirirseniz, eklenen yeni bağlantı noktası numarasıyla bağlantı gösterilmez. Siz tıklayana kadar bağlantı noktası numarasını ekleyemez. Ayrıca, kullanıcı bağlantıya sağ tıklar ve "Bağlantı Konumunu Kopyala" yaparsa, bağlantı noktası numarası olmadan değiştirilmemiş URL'yi alır. Yani bu ideal değil.

Aşağıda, sayfa yüklendikten hemen sonra URL'yi değiştirmek için bir yöntem verilmiştir, bu nedenle bağlantının üzerine gelerek veya "Bağlantı Konumunu Kopyala" işlemini yapmak, bağlantı noktası numarasıyla güncellenmiş URL'yi alır:

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

Farkında olduğum uyarıları işaret ettiğiniz için teşekkürler. Benim durumumda uyarılar çok önemli değil ve ilk çözümünüzün basitliğini tercih ediyorum. Cevabınızı zaten yükseltmiş olduğumdan neredeyse emindim, ancak yazılım öyle düşünmüyor gibi görünüyor ve muhtemelen yazılımın belleği benimkinden daha güvenilir. Ben (tekrar ??) oy verdim.

— Kevin Walker

Gizemi çözdüm: Bunun yerine yanlışlıkla diğer cevaplardan birine oy verdim. Hata. Yanlışlıkla oyumu tersine çevirecek kadar itibarım yok.

— Kevin Walker

<a href="#" onclick="javascript:event.target.port=8888">port 8888</a>w3 özelliklerine göre teknik olarak çalışmamalıdır . event.targetolması gerekiyordu readonly. Ama benim için Chrome ve Firefox'ta çalışıyor gibi görünüyor!

— JamesThomasMoon1979

Tek astarlı çözüm harika! +1

— Piotr Kula

Teşekkürler. İkinci çözümünüzü beğendim çünkü HTML'deki öğenin href değerini en olası URI'ye yedek olarak ayarlayabilirim.

— Duncan X Simpson

56

Bunu document.write kullanarak kolayca yapabilirsiniz ve üzerine geldiğinizde URL doğru şekilde görüntülenecektir. Ayrıca bu yöntemi kullanarak benzersiz bir kimliğe ihtiyacınız yoktur ve Chrome, FireFox ve IE ile çalışır. Yalnızca değişkenlere referans verdiğimizden ve herhangi bir harici komut dosyası yüklemediğimizden, burada document.write kullanımı sayfa yükleme performansını etkilemeyecektir.

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

3

Basit ve zarif! Bunun neden daha fazla oy alamadığını bilmiyorum - belki de geç kalmıştır.

— Kevin H. Patterson

5

Ayrıca window.location.protocol, sadece ile başlayarak parçayı eklemenize gerek olmadığını unutmayın '//'.

— kbrock

Mantıklı gibi. Zarif.

— Jay

Gerçekten kullanışlı ve zarif.

— Robert Lucian Chiriac

Sadece bunun document.writegünümüzde neredeyse evrensel olarak tavsiye edilmediğini söylemek için . myElement.innerHTML = '...'

— Şuna

13

Fareyle üzerine gelindiğinde bağlantı noktası numarasını değiştirin:

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

Bu, https://stackoverflow.com/a/13522508/1497139'un , bağlantıyı doğru bir şekilde göstermemenin dezavantajı olmayan bir iyileştirmesidir .

— Wolfgang Fahl
kaynak

5

JavaScript olmadan, bazı sunucu tarafı komut dosyalarına güvenmeniz gerekir. Örneğin, ASP kullanıyorsanız, bunun gibi bir şey ...

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

çalışmalı. Bununla birlikte, tam biçim, kullandığınız teknolojiye bağlı olacaktır.

— gdt
kaynak

4

Bununla uğraştıktan sonra, aslında SERVER_NAME'in ayrılmış bir değişken olduğunu buldum. Dolayısıyla, sayfadaysanız (www.example.com:8080) 8080'i bırakıp başka bir bağlantı noktasını çalıştırabilmelisiniz. Örneğin, bu değiştirilmiş kod benim için çalıştı ve beni herhangi bir temel bağlantı noktasından 8069 numaralı bağlantı noktasına taşıyor (bağlantı noktanızı gerektiği gibi değiştirin)

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

— Landis Arnold
kaynak

1

Güzel PHP çözümü! Otomatik olarak algılanması için protokolü devre dışı bırakabilirsiniz:<a href="https://stackoverflow.com//<?php print $_SERVER{'SERVER_NAME'}; ?>:8069">

— ADTC

3

URL'yi sunucu değişkenlerinden almak daha iyidir:

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

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

— T30
kaynak

2

Karmaşık javascript'e gerek yok: çapanızdan sonra bir komut dosyası düğümü ekleyin, ardından düğümü javascript'te alın ve window.location.origin yöntemiyle href özelliğini değiştirin .

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

İd özelliği sayfa çapında benzersiz olmalıdır, bu nedenle düğüm nesnelerini almak için başka bir yöntem kullanmak isteyebilirsiniz.

Linux'ta apache ve Firefox ile test edilmiştir.

— MUY Belçika
kaynak

Bazı nedenlerden dolayı bu benim için pek işe yaramadı - tarayıcıyı yönlendirdi http//localhost:8081, eksik iki nokta üst üste not edin. Chrome zaten http'yi varsaydığı için protokol kısmını tamamen kaldırdım.

— joerick

Nasıl test ettin?

— MUY Belgium

1

Bunun window.location.hostnameyerine olması gerektiğini düşünüyorum . Developer.mozilla.org/en-US/docs/Web/API/Location

— mwfearnley

2

Bu çözüm bana daha temiz görünüyor

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

— a_rahmanshah
kaynak

1

Dayanarak Gary Hole cevap ancak sayfa yüklendiğinde yerine tıklama URL'ler değiştirir.

Url'yi css kullanarak göstermek istedim:

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

Bu nedenle, çapanın href değerinin ziyaret edilecek gerçek url'yi içerecek şekilde dönüştürülmesine ihtiyacım vardı.

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

Sayfa yüklemede yukarıdaki işlevi çağırın.

veya tek satırda:

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

(Ben kullanıyorum foryerineforEach bu yüzden IE7'de çalışıyor.)

— Sam Hasler
kaynak

0

Baktığım yanıtların hiçbiri (ve şunu söyleyeceğim, hepsini okumadım) URL'yi bir orta tıklama veya "yeni sekmede aç" düzgün çalışacak şekilde ayarlayın - yalnızca bağlantıyı izlemek için normal bir tıklama. Gary Greene'nin cevabından ödünç aldım ve URL'yi anında ayarlamak yerine sayfa yüklendiğinde ayarlayabiliriz:

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