URL tương đối với một số cổng khác nhau trong một siêu liên kết?

135

Có cách nào mà không có kịch bản phía Javascript / máy chủ để liên kết đến một số cổng khác trên cùng một hộp không, nếu tôi không biết tên máy chủ?

ví dụ:

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

(Ví dụ này không hoạt động vì nó sẽ chỉ coi: 8080 là một chuỗi tôi muốn điều hướng đến)

html 
— Ciaran McN Khoa
nguồn
stackoverflow.com/questions/8317059/relative-path-but-for-port Hãy xem điều này ... nó hoạt động với tôi
Vì nhiều người bên dưới chồng chất với các giải pháp phía máy chủ, $http_hostvar NGINX hoạt động, ví dụ: return 200 '<html><body><iframe id="ic" src="http://$http_host:2812/"></iframe></body></html>tức là trong một /etc/nginx/conf.d/strange.conftệp.
— MarkHu

Câu trả lời:

52

Sẽ thật tuyệt nếu điều này có thể hoạt động, và tôi không hiểu tại sao không bởi vì : là một ký tự dành riêng cho việc tách cổng bên trong thành phần URI, vì vậy trình duyệt có thể hiểu thực tế đây là một cổng liên quan đến URL này, nhưng thật không may, nó không ' và không có cách nào để nó làm điều đó.

Do đó, bạn sẽ cần Javascript để làm điều này;

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

Đã thử nghiệm trong Firefox 4

Câu đố: http://jsfiddle.net/JtF39/79/

Cập nhật : Đã sửa lỗi cho cổng nối thêm vào cuối url và cũng đã thêm hỗ trợ cho các url tương đối và tuyệt đối được thêm vào cuối:

<a href=":8080/test/blah">Test absolute</a>
<a href=":7051./test/blah">Test relative</a>
— Gary xanh
nguồn
1
Vì vậy, không có javascript thì không có giải pháp thực sự
— Daniel Ruf
1
Không có cách nào để làm điều này mà không có Javascript.
— Gary Green
6
Điều này không hoạt động trong Safari 6. Vấn đề là bạn không xóa cổng khỏi url tương đối, vì vậy bạn kết thúc với một cái gì đó như http://myhost:8080/:8080cho href=":8080". Bạn có thể thêm dòng này dưới `target.port = port [1];` để sửa lỗi này. target.href = target.href.replace("/:"+target.port, "");(Đây không phải là một giải pháp hoàn hảo, vì nó là một công cụ tìm / thay thế, nhưng nó tốt cho những trường hợp đơn giản khi bạn không lo lắng về chuỗi cổng có trong URL.)
— zekel
1
Giải pháp của tôi là tạo một lớp ASP.NET tạo URL. Nó thực chất là giải pháp tương tự như trên, chỉ là phía máy chủ.
— tân binh1024
7
Xin vui lòng không sử dụng giải pháp này . Nó sẽ hoàn toàn phá vỡ các máy khách mà không có Javascript, có thể bao gồm nhiều thiết bị trợ năng như trình đọc màn hình. Tạo các URL ở phía máy chủ thay thế.
— Sven Slootweg
88

Làm thế nào về những điều này:

Sửa đổi số cổng khi nhấp:

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

Tuy nhiên, nếu bạn di chuột qua liên kết, nó sẽ không hiển thị liên kết với số cổng mới được bao gồm. Chỉ đến khi bạn nhấp vào nó, nó sẽ thêm số cổng. Ngoài ra, nếu người dùng nhấp chuột phải vào liên kết và thực hiện "Sao chép vị trí liên kết", họ sẽ nhận được URL chưa sửa đổi mà không cần số cổng. Vì vậy, điều này không lý tưởng.

Đây là một phương pháp để thay đổi URL ngay sau khi tải trang, do đó, di chuột qua liên kết hoặc thực hiện "Sao chép vị trí liên kết" sẽ nhận được URL cập nhật với số cổng:

<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
nguồn
Cảm ơn đã chỉ ra những cảnh báo, mà tôi đã nhận thức được. Trong tình huống của tôi, hãy cẩn thận không quan trọng lắm, và tôi thích sự đơn giản của giải pháp đầu tiên của bạn. Tôi gần như chắc chắn rằng tôi đã nâng cao câu trả lời của bạn, nhưng phần mềm dường như nghĩ là không, và có lẽ bộ nhớ của phần mềm đáng tin cậy hơn tôi. Tôi đã nâng cấp nó (một lần nữa ??).
— Kevin Walker
Tôi đã giải quyết được bí ẩn: Thay vào đó, tôi vô tình đưa ra một trong những câu trả lời khác. Giáo sư. Tôi không có đủ danh tiếng để đảo ngược tình cờ của mình.
— Kevin Walker
<a href="#" onclick="javascript:event.target.port=8888">port 8888</a>về mặt kỹ thuật không hoạt động, theo thông số kỹ thuật của w3 . event.targetđược coi là readonly. Nhưng nó dường như hoạt động với tôi trong Chrome và Firefox!
— JamesThomasMoon1979
Một giải pháp lót là tuyệt vời! +1
— Piotr Kula
Cảm ơn. Tôi thích giải pháp thứ hai của bạn vì tôi có thể đặt href của phần tử trong HTML làm dự phòng cho URI có khả năng nhất.
— Duncan X Simpson
55

Bạn có thể thực hiện dễ dàng bằng document.write và URL sẽ hiển thị chính xác khi bạn di chuột qua nó. Bạn cũng không cần một ID duy nhất bằng phương pháp này và nó hoạt động với Chrome, FireFox và IE. Vì chúng tôi chỉ tham chiếu các biến và không tải bất kỳ tập lệnh bên ngoài nào, sử dụng document.write ở đây sẽ không ảnh hưởng đến hiệu suất tải trang.

<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
nguồn
3
Đơn giản và thanh lịch! Tôi không biết tại sao điều này không có nhiều phiếu bầu hơn - có thể đó chỉ là một người đến sau.
— Kevin H. Patterson
5
cũng lưu ý, bạn không cần bao gồm window.location.protocolmột phần, chỉ cần bắt đầu với '//'.
— kbrock
Có vẻ hợp pháp. Thanh lịch.
— Jay
Thật tiện dụng và thanh lịch.
— Robert Lucian Chiriac
Chỉ cần nói rằng đó document.writelà khá nhiều phổ biến hiện nay không được khuyến khích. Sẽ tốt hơn nếu làm một cái gì đó nhưmyElement.innerHTML = '...'
— mwfearnley
5

Không có JavaScript, bạn sẽ phải dựa vào một số kịch bản phía máy chủ. Ví dụ: nếu bạn đang sử dụng ASP, một cái gì đó như ...

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

nên làm việc. Tuy nhiên, định dạng chính xác sẽ phụ thuộc vào công nghệ bạn đang sử dụng.

— gdt
nguồn
4

Sau khi vật lộn với điều này, tôi thực sự thấy rằng SERVER_NAME là một biến dành riêng. Vì vậy, nếu bạn đang ở trên trang (www.example.com:8080), bạn sẽ có thể thả 8080 và gọi một cổng khác. Chẳng hạn, mã sửa đổi này chỉ hoạt động với tôi và chuyển tôi từ bất kỳ cổng cơ sở nào sang cổng 8069 (thay thế cổng của bạn theo yêu cầu)

<div>
    <a href="http://<?php print
    $_SERVER{'SERVER_NAME'}; ?>:8069"><img
    src="images/example.png"/>Example Base (http)</a>
</div>
— Landis Arnold
nguồn
1
Giải pháp PHP tuyệt vời! Bạn có thể bỏ giao thức để tự động phát hiện:<a href="https://stackoverflow.com//<?php print $_SERVER{'SERVER_NAME'}; ?>:8069">
— ADTC
3

Tốt hơn là lấy url từ các biến máy chủ: 

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

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

Không cần javascript phức tạp: chỉ cần chèn một nút script sau neo của bạn, sau đó lấy nút trong javascript và sửa đổi thuộc tính href của nó bằng phương thức window.location.origin .

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

Thuộc tính id phải là trang rộng duy nhất, vì vậy bạn có thể muốn sử dụng phương thức khác để truy xuất các đối tượng nút.

Đã thử nghiệm với apache và Firefox trên Linux.

— MUY Bỉ
nguồn
Vì một số lý do, điều này không hiệu quả với tôi - nó đã hướng trình duyệt tới http//localhost:8081, lưu ý dấu hai chấm bị thiếu. Tôi vừa mới xóa phần giao thức hoàn toàn kể từ khi Chrome giả sử http.
— tham gia
Làm thế nào bạn đã thử nghiệm nó?
— MUY Bỉ
1
Tôi nghĩ rằng điều này nên được window.location.hostnamethay thế. Xem developer.mozilla.org/en-US/docs/Web/API/Location
— mwfearnley
2

Giải pháp này có vẻ sạch hơn đối với tôi

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

Dựa trên câu trả lời của Gary Hole , nhưng thay đổi các url khi tải trang thay vì nhấp chuột.

Tôi muốn hiển thị url bằng css:

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

Vì vậy, tôi cần phải được neo của href để được chuyển đổi để chứa url thực sự sẽ được truy cập.

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

Gọi chức năng trên khi tải trang.

hoặc trên một dòng:

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

(Tôi đang sử dụng forthay vì forEachvậy nó hoạt động trong IE7.)

— Sam Hasler
nguồn
0

Không có câu trả lời nào tôi đã xem (và tôi sẽ nói, tôi đã không đọc hết) điều chỉnh URL sao cho nhấp chuột giữa hoặc "mở trong tab mới" sẽ hoạt động chính xác - chỉ một nhấp chuột thông thường để theo liên kết. Tôi đã mượn câu trả lời của Gary Greene và thay vì điều chỉnh URL một cách nhanh chóng, chúng tôi có thể điều chỉnh nó khi tải trang:

...
<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
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.