예제 10-9. location 객체로 웹 사이트 접속
WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 21:29 |5. location 객체
location 객체는 윈도우에 로드된 웹 페이지의 URL 정보를 나타내는 객체로서, 윈도우 열릴 때 자동 생성된다.
URL 정보는 다음과 같이 window의 location 프로퍼티를 통해 알아낼 수 있다.
ex)
window.location 혹은 location
* location 객체의 프로퍼티와 메소드
hash // '#'을 포함하는 앵커 이름 문자열
host // 도메인과 포트 번호를 포함하는 웹 서버 주소 문자열
hostname // 웹 서버 이름
href // URL 전체 문자열
pathname // 디렉터리 부분 문자열
port // 포트 번호 문자열
protocol // 프로토콜 문자열
search // URL에서 '?'과 그 뒷부분 문자열로서, 주로 웹 서버로 검색을 요청할 때 동반되는 파라미터 문자열
assign() // 새로운 웹 페이지를 로드한다.
reload() // 현재 웹 페이지를 다시 로드한다. 페이지가 수정되었으면 반영된다.
replace() // 현재 웹 페이지의 URL을 히스토리에서 제거하고, 새로운 페이지를 로드한다.
* location 객체로 웹 페이지 로드
location 객체를 활용하면 윈도우에 새로운 웹 페이지를 쉽게 로드할 수 있다.
예를 들어 현재 윈도우에 네이버 페이지를 로드하는 자바스크립트 코드는 다음과 같다
window.location = "http://www.naver.com";
window.location.href = "http://www.naver.com";
이것은 location 객체의 메소드를 호출하여 재작성할 수 있다.
window.location.assign("http://www.naver.com");
window.location.replace("http://www.naver.com");
다음은 location 객체를 이용하여 새 윈도우에 네이버 페이지를 로드하는 사례이다.
var win = window.open(); // 빈 윈도우 열기
win.location = "http://www.naver.com"; // 빈 윈도우에 네이버 페이지 로드
예제 10-9. location 객체로 웹 사이트 접속
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>window.location으로 웹 사이트 접속</title> <script> function load() { var select = document.getElementById("site"); window.location=select.options[select.selectedIndex].value; // 사용자가 선택한 옵션(<option>) 인덱스 } </script> </head> <body> <h3>window.location으로 웹 사이트 접속</h3> <hr> 사이트 선택 : <select id="site"> <option value="http://www.naver.com" selected>네이버 <option value="http://www.google.com">구글 <option value="http://www.microsoft.com">마이크로소프트 </select> <p> <button onclick="load()">웹 사이트 접속</button> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 10-11. 스크린 장치ㅔ 관한 정보 출력 (0) | 2017.11.03 |
|---|---|
| 예제 10-10. navigator 객체로 브라우저의 정보 출력 (0) | 2017.11.03 |
| 예제 10-6. 1초마다 10픽셀씩 자동 스크롤. 예제 10-7. 웹 페이지 프린트. 예제 10-8. onbeforeprint와 onafterprint 이벤트 활용 (0) | 2017.11.02 |
| 예제 10-5. 윈도우의 위치와 크기 조절 (0) | 2017.11.02 |
| 예제 10-3. setTimeout()으로 웹 페이지 자동 연결. 예제 10-4. setInterval()로 텍스트 회전 (0) | 2017.11.02 |