[FrontEnd] 팝업창 구현

팝업창 구현

첫번째 문제점

• 처음엔 모달창으로 만들려고 했으나 기존의 윈도우 위에 생기고, 기존 창에 접근할 수 없음
• 기존의 창과 구분되는 새로운 창이 열리도록 해야함

구현

• window.open을 사용

window.open('path','popup창 이름', '화면 크기 및 위치')
: 새로운 창을 띄움

• path: 라우터에 등록된 경로로 팝업창의 URL 경로
• popup창 이름: 창의 이름
• 화면 크기 및 위치 : 화면 상에 어디에 위치할 지 좌표와 크기 설정

<script>
  ....

	methods:{
    	....
    	}, openPopup(){
          // 팝업창 생성, 새로운 윈도우를 띄움
          // 위치는 오른쪽 상단으로 하고, 크기를 작게 설정
            this.popup = window.open('/newAlter',
            'Window Capture',
            "left=2000, top=50, width=350, height=300"
            )

        },
....  
</script>

• 새로운 팝업창의 component 구현

  window.close() : 화면을 닫음
  window.opener.parent.location.reload() : 부모창을 새로고침함

<script>

export default {
    name: '',
    methods:{
        ChildPopup(){
            window.opener.parent.location.reload()
            window.close()
        }
    }
};

</script>

두번째 문제점

• 기존 부모 페이지와 새로운 팝업창 간의 통신 방법이 필요
• 여러가지 방법으로 구현해 보았으나 실패
• 결국 localstorage를 사용하는 방법을 사용하기로 결정

localStorage

: HTML5에서 추가된 저장소로, 브라우저에 key-value 값을 Storage에 저장할 수 있고 저장한 데이터는 세션간에 공유됨, 탭이나 창을 닫아도 데이터는 브라우저에 유지

-> sessionStorage: 브라우저에 key-value값을 저장할 수 있으나 새로고침이나 창을 닫을 경우 데이터는 소멸

localStorage

• setItem('key','value'): key-value값 추가 또는 변경
• getItem('key'): key에 대한 value 값을 받음
• removeItem(): 값 삭제
• clear(): 도메인 내의 모든 값 삭제

<script>
  ....

	methods:{
    	....
    	}, openPopup(){
          // 팝업창 생성, 새로운 윈도우를 띄움
          // 위치는 오른쪽 상단으로 하고, 크기를 작게 설정
            this.popup = window.open('/newAlter',
            'Window Capture',
            "left=2000, top=50, width=350, height=300"
            )
          // localStorage에 key-value값 추가
          localStorage.setItem('open', 'false')
          // localStoarge에서 value를 가져옴
          this.open = localStorage.getItem('open')

        },
....  
</script>

<script>

export default {
    name: '',
    methods:{
        ChildPopup(){
          // key-value값 변경
            localStorage.setItem('open', 'true')
            window.opener.parent.location.reload()
            window.close()
        }
    }
};

</script>