SCRIPT 자바스크립트로 현재 주소 가져오기 - URL 공유 방법
페이지 정보
조회 2,362회 작성일 22-04-03 14:58
본문
현재 주소 가져오기
자바스크립트 URL 복사 방법
보통 공유버튼을 만들때, 현재 주소를 클립보드에 담아 보내는 방법을 사용한다.
그런데 필요에 따라서는 일부분만 필요할 때도 있다. 이때 사용하는 방법이 아래의 방법이다.
자바스크립트로 현재 주소 가져오기 - URL 공유 방법
주소 전체를 가져 오는 방법
이때 사용하는 코드는 "window.location.href"이다. 예를 들어, 문서에 나타내려면 아래처럼 하면 된다.
[code]
<script language='javascript'>
document.write (window.location.href);
</script>
[/code]
주소의 일부분만 가져오기
하지만 일부분만 필요할 때도 있다.
예를 들어, 검색페이지에서 검색을 하다보면 URL 주소창에 이런 주소가 적히는 것을 볼 수 있을 것이다.
http://www.kiss7.kr:8080/search?query=1#text
이것도 부분부분을 따로 가져올 수 있는 장점이 자바스크립트 주소 복사하기 기능이다. 예를 들자면 아래처럼 색깔 부분별로 따로 가져올 수가 있는 것이다.
http://www.kiss7.kr:8080/search?query=1#text
이것을 해당하는 옵션 순서대로 쓰자면 이렇다. (색깔 순서별)
protocol, hostname, port, pathname, search, hash다.
이것들을 "window.location." 뒤에 붙여서 사용하면 된다.
자바스크립트 주소 가져오기 예제
클립보드에 바로 넣을 수도 있으니, 확인을 바로 할 수 있게 document.write문으로 화면에 표시하도록 해 보겠다.
[code]
<script language='javascript'>
document.write (window.location.hostname);
</script>
[/code]
이렇게 하면 도메인만 나타난다. 즉, 도메인 부분만 따로 저장할 수도, 공유할 수도 있다는 말이다.
위의 코드에서 hostname부분만 아래와 같이 바꾸면 다양한 방식으로 주소를 가져올 수 있다.
부분별 불러오기가 어떻게 다른지 위에서 예를 든 것으로 아래에 다시 예를 든다.
http://www.kiss7.kr:8080/search?query=1#text
위의 주소일 경우에 어떻게 되는지 오른쪽에 예를 설명했다.
window.location.href : 전쳬 경로다. → http://www.kiss7.kr:8080/search?query=1#text
window.location.hostname : 도메인 경로다. → www.kiss7.kr
window.location.host : 포트까지의 경로다. → www.kiss7.kr:8080
window.location.protocol : 시작 프로토콜 부분. → http:
window.location.port : 포트 부분. → 8080
window.location.pathname : 하위 페이지 부분. → search
window.location.search : 검색을 경우 ?이하의 부분. → ?query=1
window.location.hash : 마지막에 추가되는 #부분. → #text
부분 주소 가져오기의 예제
그러므로 일부분씩 가져와서 하나로 연결하는 것도 가능하고, 일부분을 빼버리는 것도 가능하다.
일부분만 보여주는 것은 위에서 예를 들었으니, 이번에는 일부분씩 가져와서 조합하는 방법을 예를 든다.
[code]
<script language='javascript'>
var kissurl = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search + window.location.hash;</script>
[/code]
다른 곳에서 document.write (kissurl); 라고 쓰면 필요한 부분의 주소를 가져오는 것을 확인할 수 있다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
(단, 위의 경로는 검색 페이지의 경우이므로, 다른 페이지라면 search 같은 부분은 나타나지 않는다.)