하이퍼 링크에서 다른 포트 번호에 대한 상대 URL?

136

호스트 이름을 모르는 경우 Javascript / 서버 측 스크립팅을 사용하지 않고 동일한 상자의 다른 포트 번호에 연결하는 방법이 있습니까?

예 :

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

(이 예제는 : 8080을 탐색하려는 문자열로 취급하므로 작동하지 않습니다)

html

— 키아 런 맥 널티
소스

stackoverflow.com/questions/8317059/relative-path-but-for-port 이것을 확인하십시오 ... 그것은 나를 위해 일했다

아래에 많은 사람들이 서버 측 솔루션에 쌓여 있기 때문에 NGINX $http_hostvar는 예를 들어 파일 return 200 '<html><body><iframe id="ic" src="http://$http_host:2812/"></iframe></body></html>에서 작동 /etc/nginx/conf.d/strange.conf합니다.

— MarkHu

52

이것이 작동하면 좋을 것입니다. 왜 :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 끝에 포트를 추가하는 버그가 수정되었으며 끝에 추가되는 상대 및 절대 URL에 대한 지원이 추가되었습니다.

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

— 게리 그린
소스

1

따라서 자바 스크립트 없이는 진정한 해결책이 없습니다

— Daniel Ruf

2

자바 스크립트 없이는이를 수행 할 방법이 없습니다.

— Gary Green

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

7

제발 이 솔루션을 사용하지 마십시오 . 자바 스크립트가없는 클라이언트에서는 화면 판독기와 같은 많은 접근성 장치를 포함하여 완전히 중단 됩니다. 대신 서버 측에서 URL을 생성하십시오.

— Sven Slootweg

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>

— 크레이그 맥퀸
소스

내가 알고 있던 경고를 지적 해 주셔서 감사합니다. 내 상황에서주의 사항은별로 중요하지 않으며 첫 번째 솔루션의 단순성을 선호합니다. 나는 당신의 대답을 이미 찬성했다고 거의 확신했지만 소프트웨어는 생각하지 않는 것 같으며 아마도 소프트웨어의 메모리가 내 것보다 더 안정적 일 것입니다. 나는 그것을 upvoted했다 (다시 ??).

— Kevin Walker

나는 그 수수께끼를 풀었다 : 나는 우연히 다른 답변들 중 하나를 대신 찬성했다. 죄송합니다. 우발적 인 투표를 취소 할만 큼 평판이 충분하지 않습니다.

— Kevin Walker

<a href="#" onclick="javascript:event.target.port=8888">port 8888</a>w3 사양 에 따라 기술적으로 작동하지 않아야합니다 . event.target이어야 readonly합니다. 그러나 Chrome 및 Firefox에서 작동하는 것 같습니다!

— JamesThomasMoon1979

하나의 라이너 솔루션이 훌륭합니다! +1

— Piotr Kula

감사. HTML에서 요소의 href를 가장 가능성이 높은 URI로 대체 할 수 있기 때문에 두 번째 솔루션이 마음에 듭니다.

— Duncan X Simpson

56

document.write를 사용하여 쉽게 수행 할 수 있으며 URL을 가리킬 때 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

합법적 인 것 같습니다. 우아한.

— Jay

정말 편리하고 우아합니다.

— Robert Lucian Chiriac

그냥 그 말을 document.write거의 보편적으로 현재 권장되지 않습니다. 다음과 같은 작업을 수행하는 것이 좋습니다.myElement.innerHTML = '...'

— mwfearnley

13

마우스 오버시 포트 번호를 수정하십시오.

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

이것은 https://stackoverflow.com/a/13522508/1497139 의 개선 사항으로 , 링크를 올바르게 표시하지 않는 단점이 없습니다.

— 볼프강 팔
소스

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

복잡한 자바 스크립트가 필요 없습니다. 앵커 뒤에 스크립트 노드를 삽입 한 다음 자바 스크립트로 노드를 가져 와서 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에서 아파치 및 Firefox로 테스트했습니다.

— MUY 벨기에
소스

어떤 이유로 든 이것이 제대로 작동하지 않았으므로 브라우저가 http//localhost:8081에 콜론 을 지시했습니다 . 어쨌든 Chrome이 http를 가정했기 때문에 프로토콜 부분을 모두 제거했습니다.

— joerick

어떻게 테스트 했습니까?

— MUY Belgium

1

나는 이것이 window.location.hostname대신 해야한다고 생각합니다 .

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

페이지로드시 위의 함수를 호출하십시오.

또는 한 줄에 :

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()">
...

— 디포
소스