child window에서 parent window form submit 컨트롤하기

window.open으로 연 child window에서 parent window의 form submit 하기!

1. parent window에 formMaker() 만들기

parent window의 스크립트에 formMaker() 함수를 만듭니다. document.createElement(), setAttribute() 등을 이용해 form과 그 안에 들어갈 input 요소들을 만들고 document.body.appendChild() 로 form을 생성한 다음 form.submit() 처리까지 잊지 마세요!

🤔 왜 document.body.appendChild()인가요? document.appendChild()를 사용하면 안되나요?
➡️ document.appendChild()를 사용하면 Failed to execute 'appendChild' on 'Node': Only one element on document allowed. 콘솔 오류가 발생합니다 :(

// parent window

function formMaker() { // url에 POST로 이름과 타입을 담은 form을 submit
  var form = document.createElement('form');
  var inputName = doucment.createElement('input');
  var inputType = doucment.createElement('input');
  
  form.setAttribute('action', url);
  form.setAttribute('method', 'POST');
  
  inputName.setAttribute('type', 'text');
  inputName.setAttribute('name', 'name');
  inputName.setAttribute('value', 'Professor X');
  
  inputType.setAttribute('type', 'text');
  inputType.setAttribute('name', 'type');
  inputType.setAttribute('value', 'Mutant');
  
  form.appendChild(inputName);
  form.appendChild(inputValue);
  
  document.body.appendChild(form);
  form.submit();
}

2. child window에서 함수 호출하기

child window에서 필요한 부분에 formMaker()를 호출합니다. child window에서 parent window의 함수를 호출하기 위해서는 window.opener 객체가 필요합니다. window.opener.formMaker() 이렇게 함수를 호출하면 parent window의 formMaker() 함수가 실행됩니다. 만약 child window에서 어떤 값을 넘기고 그 값을 parent window에서 submit 해야한다면 formMaker()에 파라미터를 추가하면 됩니다. window.opener.formMaker(param) 이렇게요!

//child window

window.opener.formMaker(); // parent window의 formMaker 실행

👋 만약 child window에서 redirect 등의 액션이 일어나 parent window의 window.opener 객체가 null, undefined 혹은 콘솔 에러가 뜬다면 이 포스트를 참고하세요.

잘못된 부분이나 추가되면 좋은 내용들은 댓글로 남겨주세요! 🥰