?
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
27
28
29
30
31
32
33
34
35
36
37
Location 객체 :
 
        window객체의 프로퍼티로 문서의 주소와 관련된 객체이다.
 
        => 이 객체를 통해 윈도우의 문서 URL을 변경할 수 있고, 문서를 해당 URL로 이동하도록 제어할 수 있다.
 
        <script type="text/javascript">
            console.log("현재 주소 : " + window.location.href);
            console.log(location.toString(),location.href);
 
            // URL Parsing
            //      : location 객체는 URL을 의미에 따라서 별도의 프로퍼티로 제공하고 있다.
            console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash);
 
            // 현재 문서를 http://www.google.com으로 이동한다.
            //location.href="http://www.google.com";
 
            // 또 다른 방식
            //self.location="http://www.naver.com";
 
            // 현재 문서를 리로드한다.
            //location.reload();
        </script>
 
 
    navigator 객체 :
 
        window 객체의 프로퍼티로 "브라우저의 정보를 제공하는 객체이다."
                => 주로 "호환성 문제"등을 위해 사용한다.
        <script type="text/javascript">
            // 다음과 같이하면 해당 브라우저 정보를 얻을 수 있다.
            console.log(navigator);
            // [ 브라우저 정보 ]
            // 1. appName : 웹브라우저 이름(크롬은 Nescape)
            // 2. appVersion : 버전정보
            // 3. userAgent : 브라우저가 서버측으로 전송하는 USER_AGENT HTTP 헤더의 내용이다.
        </script>
저작자표시 비영리

'스터디 > 자바스크립트' 카테고리의 다른 글

자바스크립트 navigator를 이용한 IE 버전 알아내기  (0) 2017.08.08
자바스크립트로 부모,자식 요소 접근하기  (0) 2017.08.08
자바스크립트로 제어하고 싶은 대상 선택하기(찾기)  (0) 2017.08.04
window 객체(location,navigator,screen etc...) : 부모창 자식창간 데이터 주고 받기 포함  (0) 2017.08.04
HTML에서 자바스크립트 로드하기  (0) 2017.08.04


[    Javascript의 브라우저 창 Window 객체(부모창 자식창 값 주고 받기 포함)    ]



window 객체


    • Javascript 실행시 가장 상위에 존재하는 객체

        • 변수를 선언하거나 함수 선언시 window 객체안에 선언됨
        • 크롬에서 F12를 눌러 console탭에서 window 객체를 입력해서 다양한 속성들을 조회해볼 수 있음.

      • 표시된 웹 페이지의 정보에 접근하거나 변경을 할 수 있음

        • window.location : 현재 브라우저 창의 주소를 나타내는 객체
        • window.location.href : 브라우저 창에 입력된 주소, 변경 가능
          • ex) window.location.href = "이동하고자하는 url "
          • ex) window.location.replace = "이동하고자하는 url" 위의 것과 차이점은 이동하고나서 뒤로가기 버튼이 활성화되지 않음.
        • window.open : 새창 띄우기
        • window.navigator : 브라우저 자체에 대한 정보
        • window.screen : 디스플레이의 사이즈
        • window.document : 웹 페이지 문서의 HTML, CSS 등에 대한 접근 가능









    • 2. [ window 객체를 이용해 새창을 띄우고 부모창과 자식창 사이에서 값을 주고 받는 방법 ]


    • var windowObj = window.open("새창에서띄울url","창이름","창의설정(옵션값)"); 처럼하면 현재창에서 새로운 창이 뜨게 됩니다. 이때 기존의 창이 부모창이 되고 새로 뜨게된 창이 자식창이되게되는데

      이때, 부모창과 자식창 사이에서 값을 주고 받기 위해서는 띄운 창의 window 객체를 저장할 변수를 선언해 저장해 놔야합니다.(windowObj)

      그런 다음 부모 창에서는 이 windowObj 변수를 이용해 자식창에 값을 전달할 수 있습니다. 예를들어, 

      windowObj.document.text2.value = "값 입력"; 이런식으로 자식창(새창)의 document 객체에 얼마든지 접근할 수 있습니다. 

      그러면, 반대로 자식창에서 부모창으로 값을 보내기 위해서는 어떤 식으로 해야할까요??

      일단, 부모창에서 자식창을 생성하면 이 자식창은 생성과 동시에 opener 라는 객체를 가지게 되고 이 opener는 바로 부모객체의 window 객체를 가리키게 됩니다. 따라서

      opener.document.parentText.value = document.text2.value; 이런식으로 자식에 있는 값을 부모 창으로 넘기는게 가능합니다.


      먼저, windowOpen1.html 즉, 부모창 예제 코드입니다.

?
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
<!DOCTYPE html>
 
  <head>
    <meta charset="utf-8">
    <title>부모창입니다.</title>
  </head>
   
    <input type="text" id="parentText" value="부모창의값" />
    <input type="text" id="receiveFromChild" value=""/>
    <button type="button" onclick="javascript:openChildWindow();">자식창열기</button>
    <script type="text/javascript">
      // 자식창 window 객체를 저장할 변수
      var windowObj;
      function openChildWindow(){
 
        // 새창에 대한 세팅(옵션)
        var settings ='toolbar=0,directories=0,status=no,menubar=0,scrollbars=auto,resizable=no,height=200,width=200,left=0,top=0';
        // 자식창을 열고 자식창의 window 객체를 windowObj 변수에 저장
        windowObj = window.open("windowOpen2.html","자식창",settings);
 
        // 자식창의 childText라는 id를 가진 태그 요소의 값에 부모창의 값을 넣음
        windowObj.document.getElementById("childText").value = document.getElementById('parentText').value;
      }
    </script>
  



다음으로 windowOpen2.html 즉, 자식창 예제 코드입니다.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
 
  <head>
    <meta charset="utf-8">
    <title>자식창</title>
  </head>
   
    부모창에서 전달받은 값 : <input type="text" id="childText" />
    <button type="button" name="button" onclick="sendToParent();">부모에게 전달</button>
    <script type="text/javascript">
      function sendToParent(){
        var txt = document.getElementById("childText").value + "자식창 값을 +합니다.";
        // opener 를 이용해 부모 window 객체에 접근할 수 있습니다.
        // 부모에게서 전달받은 값에 추가로 문자열을 더해서 다시 부모의 receiveFromChild 라는 id를 갖는
        // 태그요소에 value 값을 바꾸어 주는 작업입니다.
        opener.document.getElementById("receiveFromChild").value = txt;
 
        // 창을 닫음
        window.close();
      }
    </script>
  


위의 예제는 동일 폴더 내에서 테스트한걸로 크롬 보안상 작동하지 않을 수 있지만, 웹 서버에서 할 때는 잘 작동한다는 점 참고해주시기 바랍니다.



저작자표시

'개발 > Javascript' 카테고리의 다른 글

이벤트 발생시 a 태그의 이동기능을 동작하지 않게하고 처리하기  (0) 2017.06.11
JQuery 애니메이션 관련 정리(fadeIn,fadeOut,hide,show,animate,stop)  (0) 2017.06.11
4. script 선언의 위치?!!  (0) 2017.06.11
3. 일정주기마다 callback 함수를 실행하는 setInterval()에 대해서...  (0) 2017.06.11
2. JQuery로 선택한 태그 요소의 값과 속성을 바까보자  (3) 2017.06.11

+ Recent posts

티스토리툴바