seoyoung.dev

[javascript]- Location 객체/Navigator 객체/Window객체로 창 제어 본문

WEB/Javascript

[javascript]- Location 객체/Navigator 객체/Window객체로 창 제어

seo-0 2019. 10. 20. 17:37
자바스크립트 시리즈는 '생활코딩-클라이언트 과목의 '웹브라우저 자바스크립트' 강의'를 참고로
공부하고 기록하기 위한 용도입니다. 

 

* Location 객체

- 현재 브라우저의 URL 에 대한 정보를 지니고 있으며,

window 객체의 property 로, window.location 형태로 접근 가능하다. 

- Location 객체를 이용해서, 윈도우의 문서 URL 을 변경할 수 있고, 문서의 위치와 관련한 정보들을 얻을 수 있다. 

 

console.log(window.location.href); //현재 페이지의 url return
console.log(window.location.hostname); //웹 호스트의 domain name을 return
console.log(window.location.pathname); //현재 페이지의 경로와 파일 이름
console.log(window.location.protocol);  //웹이 사용하고 있는 프로토콜 (http: or https:)
console.log(window.location.search); //url 상 (?id=10) 처럼 조건에 해당 

//Location.assign() //해당 url의 홈페이지 오픈 

<input type="button" onclick="newDoc()" value="open new Doc" />
<script>
	function newDoc(){
      window.location.assign("https://www.naver.com");
    }
</script>

-> 'open new Doc' 버튼을 클릭시, 함수 실행 -> location.assign : 새로운 페이지 

* Navigator 객체

    -> 브라우저의 정보를 제공하는 객체이다. 

console.log(navigator.appName); //Netscape 

console.log(navigator.appVersion); //현재 브라우저의 버전을 의미한다.

    -> userAgent : 웹 브라우저가 웹 서버에게 요청을 할 때, 현재 어떤 브라우저인지 알려주는 내용 포함

                   : 서버 쪽으로 알려주는 내용이 뭔지 알려줄 때 확인 

console.dir(navigator.userAgent);

//VM2775:1 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
// (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36
* 창 제어 
  <ul>
       <li>
           <input type="button" onclick="open1()" value="window.open()" />
           // 새 창에 로드할 문서의 url
        </li>
        <li>
        <input type="button" onclick="open2()" value="window.open('demo2.html', '_self')" />
         //'_self' 때문에, 지금 호출하는 창에서 열린다. 
      </li>
      <li>
        <input type="button" onclick="open3()" value="window.open('demo3.html','_blank')" />
        // 새 창으로 열린다. 
      </li>
      <li>
        <input type="button" onclick="open4()" value="window.open('demo4.html', 'ot')" />
        //open 을 재실행했을 때, 동일한 이름의 창이 있다면 그 곳으로 문서가 로드된다. 
      </li>
    </ul>
    
    <script>
      function open1(){
         window.open('demo2.html');
      }
      function open2(){
        window.open('demo2.html', '_self');
      }
      function open3(){
        window.open('demo2.html', '_blank');
      }
      function open4(){
        window.open('demo2.html', 'ot');
      } 
    </script>

+ 새 창에 접근

   <input type="button" value="open" onclick="winopen()" />
    <input type="text" onkeypress="winmessage(this.value)"  />
    
    //onkeypress 라는 이벤트 : " "안의 자바스크립트 메세지의 이벤트 
    // - 인자로 this.value(=text field에 입력된것)
    
    <input type="button" value="close" onclick="winclose()" />

  <script>
      function winopen(){
        win =window.open('demo2.html','ot');

        // demo2를 열면, open 메소드는 demo2를 담고있는 window 객체가 window.open의 리턴값으로 반환
        //새로운 창에대한 객체 win 에 저장
      }
      function winmessage(msg){
        win.document.getElementById('message').innerText=msg;
        //demo2 열렸을 때 생기는 window 객체 win 의 메소드 호출
        // 메세지 라는 아이디의 element얻어낼 수 있다.
        // innerText : 오픈한 페이지의 태그의 값
      }
      function winclose(){
        win.close();
        //새로운 창에대한 객체에 close 호출하면, 새로운 창 닫힌다.
      }
    </script>

   <demo2.html>

-> window 객체 win의 getElementById 를 통해 새롭게 열린 페이지의 내용을 변경할 수 있다.

-> win 객체의 open과 close 메소드를 통해 새로운 창을 열고 닫을 수 있다. 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="message"> hello world</div>
  </body>
</html>

 

'WEB > Javascript' 카테고리의 다른 글

[javascript]-Element 객체( 식별자/조회/속성 )  (0) 2019.10.22
[javascript]-DOM Tree/HTMLElement와HTMLCollection  (0) 2019.10.21
[javascript]-Object model 와 BOM객체  (0) 2019.10.20
[setTimeout/setInterval, EventListener, Ajax통신, CORS란?]  (0) 2019.10.04
Hoisting/함수선언식과 표현식에서의 차이  (0) 2019.10.02
'WEB/Javascript' Related Articles more