[解決済み] ハイパーリンクで異なるポート番号への相対的なURL?
2022-05-05 14:41:29
質問
ホスト名がわからない場合、Javascriptやサーバーサイドスクリプトを使わずに、同じ箱の別のポート番号にリンクする方法はありますか?
例
<a href=":8080">Look at the other port</a>
(この例では、:8080 をナビゲートしたい文字列として扱ってしまうので、うまくいきません)
解決方法は?
これがうまくいけばいいのですが、なぜうまくいかないのか、それは
:
はURIコンポーネント内のポート分離のための予約文字なので、ブラウザは現実的にこれをこのURLからの相対的なポートとして解釈することができますが、残念ながらそうではなく、そのための方法はありません。
したがって、これを行うには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の末尾にportを付加するバグを修正し、末尾に付加する相対URLと絶対URLのサポートを追加しました。
<a href=":8080/test/blah">Test absolute</a>
<a href=":7051./test/blah">Test relative</a>
関連
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] HTMLで表示される上下の三角形(軸のない矢印)に使用できる文字は何ですか?
-
[解決済み] HTML5の数値入力のスピンボックスを非表示にすることはできますか?
-
[解決済み] 位置は絶対だが、親に対して相対的
-
[解決済み] CSSファイルで相対URLを使用していますが、どの位置からの相対位置なのでしょうか?
-
[解決済み] フレームバスターバスター ... バスターコード必要
-
[解決済み] ユーザー入力文字列を正規表現に変換する
-
[解決済み】HTML5キャンバスの画像サイズを変更する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] CSSでテキストを垂直方向にセンタリングするには?[重複しています]
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] リンクを新しいタブまたはウィンドウで開く[重複]。
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] HTMLアンカーは'name'と'id'のどちらで作成するのが良いですか?
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] HTMLのレイアウトにテーブルを使用しない理由は?[クローズド]
-
[解決済み] HTML Input="file" Accept Attribute File Type (CSV)