새창으로 form submit하는 방법 (How to open a new window on form submit)

새창으로 form submit하는 방법 (How to open a new window on form submit)

자바스크립트(Javascript)에서 동적으로 html form 태그를 생성하고, 새창으로 submit하는 방법은 아래와 같습니다.

<template>
  <div>
    <button @click="submitForm">go</button>
  </div>
</template>

<script>
// Vue에서 활용하는 예시, 기본 컨셉은 동일함 React에서도 동일하게 사용 가능
export default {
  methods: {
    submitForm() {
      const frm = document.createElement('form')
      frm.setAttribute('id', 'auth-form')
      frm.setAttribute('action', 'http://localhost:3000/auth/form')
      frm.setAttribute('method', 'post')
      frm.setAttribute('target', 'auth-form')
      document.body.appendChild(frm)

      window.open(
        'about:blank',
        'auth-form'
      )
      frm.submit()
    }
  }
}
</script>

만약 폼으로 생성한 새창의 크기를 조절하고 싶다면 3번째 파라미터로 새창의 크기를 조절하는 속성들을 추가하면 됩니다.

// 새창의 크기를 조절하는 방법 (window resize)
window.open(
  'about:blank',
  'auth-form',
  'width=' +
    parseInt(window.innerWidth) * 0.3 +
    ',height=' +
    parseInt(window.innerHeight) * 0.3 +
    ',toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=0,left=0,top=0'
)