[Javascript] location 객체

location 객체

location 객체는 현재 사용 중인 URL에 대한 정보를 제공하는 객체입니다.

location 객체

location 객체는 브라우저 주소 창에 대한 속성과 메서드를 제공하는 객체입니다.

location.속성

location 객체 메서드

종류	설명
location.assign()	새로운 문서를 로드합니다.
location.reload()	현재 문서를 새로 고침합니다.
location.replace()	현재 문서를 새로운 것으로 변경합니다.

location 객체 속성

종류	설명
location.hash()	URL의 해시값(#값)을 반환합니다.
location.host()	URL에 호스트 이름과 포트 번호를 반환합니다.
location.hostname()	URL에 포함된 호스트 이름을 설정하거나 반환합니다.
location.href()	주소를 설정하거나 URL을 반환합니다.
location.password()	URL의 해시값(#값)을 반환합니다.
location.pathname()	URL에 '/'이후에 값을 반환합니다.
location.protocol()	URL에 프로토콜을 반환합니다.
location.port()	URL에 포트 번호를 반환합니다.
location.search()	URL의 서치의 파라미터 값을 반환합니다.
location.username()	URL의 도메인 이름을 반환합니다.

Sample1

브라우저 주소와 관련된 예제입니다.

결과

해시값(#값)[location.hash] : #1
브라우저 주소[location.href] : http://webstoryboy.dothome.co.kr/Wscript/javascript41.html#1
호스트 이름과 포트 번호[location.hostname] : webstoryboy.dothome.co.kr
호스트[location.host] : webstoryboy.dothome.co.kr
프로토콜[location.protocol] : http:
'/'이후에 값[location.pathname] : /Wscript/javascript41.html

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        location.href = "http://webstoryboy.dothome.co.kr/Wscript/javascript41.html#1"
        var nowHash = location.hash;
        var nowHref = location.href;
        var nowHostname = location.hostname;
        var nowHost = location.host;
        var nowProtocol = location.protocol;
        var nowPathname = location.pathname;
        
        document.write("해시값(#값)[location.hash] : " + nowHash, "<br>");
        document.write("브라우저 주소[location.href] : " + nowHref, "<br>");
        document.write("호스트 이름과 포트 번호[location.hostname] : " + nowHostname, "<br>");
        document.write("호스트[location.host] : " + nowHost, "<br>");
        document.write("프로토콜[location.protocol] : " + nowProtocol, "<br>");
        document.write("'/'이후에 값[location.pathname] : " + nowPathname, "<br>");
    </script>
</head>
<body>
    
</body>
</html>

Sample2

클릭하면 사이트로 이동하는 예제입니다.

결과

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>클릭하면 사이트 이동하기</title>
</head>
<body>
    <button id="btn1">네이버로 이동</button>
    <button id="btn2">다음으로 이동</button>
    
    <script>
        document.getElementById("btn1").onclick = function() {
            location.href = "https://www.naver.com/";
        }
        document.getElementById("btn2").onclick = function() {
            location.href = "https://www.daum.net/";
        }
    </script>
</body>
</html>

Sample3

10초 후에 사이트 새로고침하기 예제입니다.

결과

10초 뒤에 사이트가 새로고침됩니다.
10초 뒤에 사이트가 새로고침됩니다.
10초 뒤에 사이트가 새로고침됩니다.
10초 뒤에 사이트가 새로고침됩니다.

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>10초 후에 사이트 새로고침하기</title>
</head>
<body>
    <script>
        function text(){
            document.write("10초 뒤에 사이트가 새로고침됩니다.<br>");
        }
        function func1(){
            location.reload();
        }
        
        setInterval(text, 1000); 
        setInterval(func1, 10000); 
    </script>
</body>
</html>

호환성(Compatibility) 더보기 caniuse.com

						6	7	8	9	10	11
location.assign()	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
location.reload()	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
location.replace()	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
location.hash()	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
location.host()	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
location.hostname()	사용가능	사용가능	사용가능	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
location.href()	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
location.password()	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능
location.pathname()	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
location.protocol()	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
location.port()	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
location.search()	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
location.username()	사용가능	사용가능	사용안됨	사용안됨	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용안됨