악덕고용주의 개발 일기

[    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 즉, 부모창 예제 코드입니다.