본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
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() 사용가능 사용가능 사용안됨 사용안됨 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용안됨

참고(Reference)

  • MDN JavaScript

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기