ハイパーリンクの別のポート番号への相対URL？

136

ホスト名がわからない場合、Javascript /サーバー側スクリプトなしで同じボックスの別のポート番号にリンクする方法はありますか？

例えば：

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

（この例は、：8080をナビゲートしたい文字列として扱うだけなので機能しません）

html 
— シアラン・マクナルティ
ソース
サーバー側のソリューションを上に盛ら以下の人々の多くは、nginxののため、$http_hostvarが働き、例えば：return 200 '<html><body><iframe id="ic" src="http://$http_host:2812/"></iframe></body></html>IEの/etc/nginx/conf.d/strange.confファイル。
— MarkHu 2017年

回答:

52

これがうまくいけばいいのです:が、なぜですか？はURIコンポーネント内のポート分離用の予約文字なので、ブラウザはこれを現実的にこのURLに対するポートとして解釈することができますが、残念ながらそうではありません。 tそれを行う方法はありません。

したがって、これを行うには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);

Firefox 4でテスト済み

フィドル： http : //jsfiddle.net/JtF39/79/

更新：ポートをURLの末尾に追加するバグが修正され、相対URLと絶対URLが末尾に追加されるサポートも追加されました。

<a href=":8080/test/blah">Test absolute</a>
<a href=":7051./test/blah">Test relative</a>
— ゲイリー・グリーン
ソース
1
したがって、JavaScriptなしでは真の解決策はありません
— ダニエル・ルフ
2
JavaScriptなしでこれを行う方法はありません。
— ゲーリーグリーン
6
これはSafari 6では機能しませんでした。問題は、相対URLからポートを削除していないため、http://myhost:8080/:8080forのようなものになってしまうことですhref=":8080"。この行を `target.port = port [1];`の下に追加してこれを修正できます。target.href = target.href.replace("/:"+target.port, "");（検索/置換であるため、完全なソリューションではありませんが、URLにポート文字列が含まれていることを心配しない単純なケースには適しています。）
— zekel
1
私の解決策は、URLを生成するASP.NETクラスを作成することでした。これは本質的に上記と同じソリューションで、サーバー側のみです。
— rookie1024 2014年
7
このソリューションは使用しないでください。それは完全になります壊れそうなスクリーンリーダーのような多くのアクセシビリティデバイスを含む、Javascriptをせずにクライアントに。代わりに、サーバー側でURLを生成します。
— Sven Slootweg、2015
88

これらはどうですか：

クリックでポート番号を変更します。

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

ただし、リンクの上にマウスを置くと、新しいポート番号が含まれたリンクは表示されません。それをクリックするまでは、ポート番号が追加されません。また、ユーザーがリンクを右クリックして[リンクの場所をコピー]を実行すると、ポート番号のない変更されていないURLが取得されます。したがって、これは理想的ではありません。

これは、ページが読み込まれた直後にURLを変更する方法です。そのため、リンクにカーソルを合わせるか、「リンクの場所をコピー」を実行すると、更新されたURLとポート番号が取得されます。

<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>
— クレイグ・マックイーン
ソース
私が知っていた警告を指摘してくれてありがとう。私の状況では、警告はそれほど重要ではなく、最初の解決策の単純さを好みます。私はあなたの答えをすでに賛成していたとほぼ確信していましたが、ソフトウェアはそうではないと考えているようで、おそらくソフトウェアのメモリは私のものより信頼性が高いです。私はそれを賛成しました（もう一度??）。
— ケビンウォーカー
私は謎を解決しました：代わりに他の答えの1つを誤って投票しました。おっとっと。偶発的な賛成票を無効にするほどの評判がありません。
— Kevin Walker、
<a href="#" onclick="javascript:event.target.port=8888">port 8888</a>w3仕様によると、技術的に機能しないはずです。 event.targetであるはずreadonlyです。しかし、それは私にとってChromeとFirefoxで動作するようです！
— JamesThomasMoon1979 14年
ワンライナーソリューションは素晴らしいです！+1
— Piotr Kula
ありがとう。HTMLの要素のhrefを最も可能性の高いURIへのフォールバックとして設定できるため、2番目のソリューションが気に入っています。
— Duncan X Simpson
56

document.writeを使用すると簡単に行うことができ、URLにカーソルを合わせると正しく表示されます。また、この方法では一意のIDは必要なく、Chrome、FireFox、IEで動作します。変数を参照するだけで外部スクリプトをロードしないため、ここでdocument.writeを使用しても、ページのロードパフォーマンスに影響はありません。

<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>
— カート・シュルツ
ソース
3
シンプルでエレガント！なぜこれがより多くの賛成票を持っていないのか私にはわかりません-多分それはただ後発者であるかもしれません。
— Kevin H. Patterson
5
また、window.location.protocol部分を含める必要はなく、単にで始まることに注意してください'//'。
— kbrock
スジは通ってるようだ。エレガント。
— 2016
本当に便利でエレガント。
— ロバート・ルシアン・キリアック
document.write単に言うことは、今日ではほとんど普遍的に推奨されていません。何かやって良いだろうmyElement.innerHTML = '...'
— mwfearnley
5

JavaScriptを使用しない場合、サーバー側のスクリプトに依存する必要があります。たとえば、ASPを使用している場合、次のような...

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

うまくいくはずです。ただし、正確な形式は、使用しているテクノロジーによって異なります。

— GDT
ソース
4

これに取り組んだ後、実際にSERVER_NAMEが予約された変数であることがわかりました。したがって、ページ（www.example.com:8080）にいる場合は、8080をドロップして別のポートを呼び出すことができるはずです。たとえば、この変更されたコードは私のために機能し、ベースポートからポート8069に移動します（必要に応じてポートを交換してください）

<div>
    <a href="http://<?php print
    $_SERVER{'SERVER_NAME'}; ?>:8069"><img
    src="images/example.png"/>Example Base (http)</a>
</div>
— ランディスアーノルド
ソース
1
素晴らしいPHPソリューション！それは自動検出だようにするには、プロトコルを残すことができます：<a href="https://stackoverflow.com//<?php print $_SERVER{'SERVER_NAME'}; ?>:8069">
— ADTC
3

サーバー変数からURLを取得することをお勧めします。 

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

// ASP.net
<a href='<%=Request.ServerVariables("SERVER_NAME")%>:8080/index.asp'>
— T30
ソース
2

複雑なjavascriptは必要ありません。アンカーの後にスクリプトノードを挿入し、javascriptでノードを取得して、window.location.originメソッドでhrefプロパティを変更します。

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

idプロパティはページ全体で一意である必要があるため、他のメソッドを使用してノードオブジェクトを取得することができます。

Linux上のApacheとFirefoxでテスト済み。

— MUYベルギー
ソース
何らかの理由でこれは私にとってはうまくいきませんでした-それはブラウザにを指示しましたhttp//localhost:8081、欠落しているコロンに注意してください。Chromeはとにかくhttpを想定しているので、プロトコル部分を完全に削除しました。
— joerick、2014年
どのようにテストしましたか？
— MUYベルギー、2014
1
これはwindow.location.hostname代わりにすべきだと思います。developer.mozilla.org/en-US/docs/Web/API/Location
— mwfearnley
2

このソリューションは私にはきれいに見えます

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

ゲイリーホールの回答に基づいていますが、クリックではなくページの読み込み時にURLを変更します。

私はCSSを使用してURLを表示したかった：

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

したがって、アクセスされる実際のURLを含むようにアンカーのhrefを変換する必要がありました。

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

ページの読み込み時に上記の関数を呼び出します。

または1行で：

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

（for代わりにをforEach使用しているため、IE7で動作します。）

— サムハスラー
ソース
0

私が見た答えはどれも（そして、私はすべて読んだわけではありませんが）、中央クリックまたは「新しいタブで開く」が正しく機能するようにURLを調整しません。リンクをクリックするための通常のクリックのみです。私はGary Greeneの回答を借りました。URLをオンザフライで調整する代わりに、ページが読み込まれたときにURLを調整できます。

...
<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()">
...
— ディエポ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.