하이퍼 링크에서 다른 포트 번호에 대한 상대 URL?
호스트 이름을 모르는 경우 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 끝에 포트를 추가하는 버그가 수정되었으며 끝에 추가되는 상대 및 절대 URL에 대한 지원이 추가되었습니다.
<a href=":8080/test/blah">Test absolute</a>
<a href=":7051./test/blah">Test relative</a>
어때요?
클릭시 포트 번호를 수정하십시오.
<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>
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>
마우스 오버시 포트 번호를 수정하십시오.
<a href="/other/" onmouseover="javascript:event.target.port=8080">Look at another port</a>
이것은 https://stackoverflow.com/a/13522508/1497139 의 개선 사항으로 , 링크를 올바르게 표시하지 않는 단점이 없습니다.
JavaScript가 없으면 일부 서버 측 스크립팅에 의존해야합니다. 예를 들어 ASP를 사용하는 경우 ...
<a href="<%=Request.ServerVariables("SERVER_NAME")%>:8080">Look at the other port</a>
작동해야합니다. 그러나 정확한 형식은 사용중인 기술에 따라 다릅니다.
After wrestling with this I found actually that SERVER_NAME is a reserved variable. So, if you are on page (www.example.com:8080) you should be able to drop the 8080 and invoke another port. For instance this modified code just worked for me and moves me from any base port to port 8069 (replace your port as required)
<div>
<a href="http://<?php print
$_SERVER{'SERVER_NAME'}; ?>:8069"><img
src="images/example.png"/>Example Base (http)</a>
</div>
It's better to get the url from the server variables:
// PHP:
<a href="<?=$_SERVER['SERVER_NAME']?>:8080/index.php">
// ASP.net
<a href='<%=Request.ServerVariables("SERVER_NAME")%>:8080/index.asp'>
No need of complicated javascript : simply insert a script node after your anchor, then get the node in javascript, and modify its href property with the window.location.origin method.
<a id="trans">Look at the other port</a>
<script>
document.getElementById('trans').href='http://'+window.location.origin+':8081';
</script>
The id property must be unique page wide, so you may want to use other method to retrieve node objects.
Tested with apache and Firefox on Linux.
Based on Gary Hole's answer, but changes urls on page load instead of on click.
I wanted to show the url using css:
a:after {
content: attr(href);
}
So I needed the anchor's href to be converted to contain the actual url that would be visited.
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="/test">Test</a>
a.port = port[1]; //a -> <a href="http://localhost:8080/test">Test</a>
}
}
}
Call the above function on page load.
or on one line:
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];}}
(I'm using for instead of forEach so it works in IE7.)
This solution looks cleaner to me
<a href="#"
onclick="window.open(`${window.location.hostname}:8080/someMurghiPlease`)">
Link to some other port on the same host
</a>
참고URL : https://stackoverflow.com/questions/6016120/relative-url-to-a-different-port-number-in-a-hyperlink
'Programming' 카테고리의 다른 글
| Math.random () 대 Random.nextInt (int) (0) | 2020.07.07 |
|---|---|
| Java 변수의 메모리 주소 (0) | 2020.07.07 |
| HTML 요소의 컨텐츠가 오버 플로우되는지 판별 (0) | 2020.07.07 |
| Git에서 원격 브랜치 리베이스 (0) | 2020.07.07 |
| GCC가있는 x86에서 정수 오버플로가 무한 루프를 일으키는 이유는 무엇입니까? (0) | 2020.07.07 |