반응형

버튼 클릭 시 페이지 이동이나 현재 페이지 리로드하고자 할 경우 사용할 수 있는 객체

 

주요 프로퍼티와 메서드

 

프로퍼티의 샘플 값은 다음과 같은 URL을 요청한 경우의 값이다.

"https://www.google.co.kr:8080/search#test?id=hello"

멤버

설명

샘플 값

hash

앵커명(#~)

#test?id=hello

host

호스트(호스트명 + 포트번호. 80번일 경우 생략)

www.google.co.kr:8080

hostName

호스트명

www.google.co.kr

href

링크 장소(요청 경로)

https://www.google.co.kr:8080/search#test?id=hello

*pathname

경로 이름

/search#test?id=hello

*port

포트 번호

8080

*protocol

프로토콜 이름

http:

search

쿼리 정보

?id=hello

reload()

현재 페이지를 새로고침

-

replace(url)

지정한 페이지로 이동

-

*은 읽기 전용

 

현재 페이지 이동

hreftest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form객체</title>
<script type="text/javascript">
function jump(elem){
    var isbn = elem.value;
    location.href = 'https://blog.itthis.me/'+ isbn +'?category=215492';
}
</script>
</head>
<body>
<form name="fm">
    <select name="book" onchange="jump(this)">
        <option value="">---게시글을 선택해 주세요---</option>
        <option value="187">브라우저 객체 모델</option>
        <option value="188">Window 객체</option>
        <option value="189">Location 객체</option>
        <option value="166">자바스크립트 테스트 하기</option>
    </select>
</form>
</body>
</html>
cs

페이지 이동 시 히스토리를 남기고 싶지 않다면 replace메서드를 사용한다.

 

쿼리 정보 가져오기

querytest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form객체</title>
</head>
<body>
<script type="text/javascript">
function $q(){
    var result = {};
    var str = location.search.substring(1);
    var params = str.split('&');
    for(var i = 0; i < params.length; i++){
        var kv = params[i].split('=');
        result[kv[0]] = decodeURIComponent(kv[1]);
    }
    return result;
}
 
var q = $q();
document.write('id：' + q['id']);
</script>
</body>
</html>
cs

쿼리정보 테스트는 서버에 올라가 있는 문서를 요청해야 바르게 동작한다.

파일시스템에 저장된 파일은 요청이나 아니라 그냥 내용을 열어만 보는 것이기 때문이다.

반응형
저작자표시 비영리 변경금지

'교육자료 > Javascript' 카테고리의 다른 글

17-6. Navigator 브라우저 객체  (0) 2019.05.13
17-4. Document 브라우저 객체  (0) 2019.05.13
17-3. Form 브라우저 객체  (0) 2019.05.13
17-2. Window 브라우저 객체  (0) 2019.05.13
17-1. 브라우저 객체 모델 BOM(이벤트 드리븐 모델)  (0) 2019.05.13

+ Recent posts

티스토리툴바