More

자바스크립트나 jQuery를 이용하여 새 창에서 부모창 데이터 변경

HTML 페이지에서 새창을 열고 새창에서 부모창의 DOM이나 데이터를 자바스크립트나 jquery로 변경하거나 가져오는 방법입니다.


새창에서 부모창 새로고침

location.reload(); // 페이지 새로고침

opener.location.reload(); // 부모창 페이지 새로고침




새창에서 부모창 페이지 함수 호출

// 함수이름이 functionName 일 경우

window.opener.functionName();  // 자바스크립트로 호출하는법

$(opener.location).attr('href', 'javascript:functionName();'); // jquery로 호출하는법



새창에서 부모창 데이터 변경

// 변경 할 input 태그 id나 name 이름이 openerId 일 경우

window.opener.document.getElementById('openerId').value = 데이터입력;  // 자바스크립트로 변경하는 법

$(opener.document).find('#openerId').val(데이터입력);  // jquery로 변경하는 법

$(opener.document).find('input[name=openerId]').eq(0).val(데이터입력);  

// 부모창에 input name 태그처럼 같은 이름의 태그가 여러가지 일 때 첫번째 순번 태그에만 jquery로 변경하는 법

$(opener.document).find('#openerId').attr("style", "display: block"); // jquery 로 CSS 스타일 변경



부모창 데이터를 새창으로 가져오기

// 가져올 태그 id 이름이 address 일 경우

opener.document.getElementById('address').value; // 자바스크립트 가져오는 법

$('#address', opener.document).val(); // jquery로 가져오는 법