window.opener 사용법 소개 및 사용법 example_javascript 기술

window.opener는 window.open을 통해 하위 양식을 여는 상위 양식에 대한 참조입니다.

예를 들어 상위 폼 parentForm에서 window.open("subForm.html")을 통해 subform.html의 window.opener는 parentForm을 나타냅니다. 하위 폼에서 상위 폼에 대한 참조를 얻을 수 있으므로 상위 폼의 필드 값을 설정하거나 하위 폼에서 js 메서드를 호출할 수 있습니다.
예: 인사정보 추가시 조직정보는 하위양식을 통해 입력됩니다.
인사정보 추가 시 상위양식을 사용합니다.

하위 양식이 입력을 완료하면 조직 정보(id, 이름)가 상위 양식의 orgId 및 orgName 필드에 자동으로 채워집니다.

html 코드

코드 복사 코드는 다음과 같습니다.

기관


onclick="openWin('org.do?select=true','selectorg' ,800,500,1)" >

JS 코드

코드 복사 코드는 다음과 같습니다:

/*
*새 창 열기(window.open()을 통해)
* f: 링크 주소
* n: 창 이름
* w: 창 너비
* h: 창 높이
* s: 창에 스크롤 막대가 있는지 여부, 1: 스크롤 막대가 있습니다. 스크롤 막대 없음
*/
functionopenWin(f,n,w,h,s){
sb= s == "1" ? "1" : "0"l= ( screen.width - w)/2;
t= (screen.height - h)/2
sFeatures= "left=" l ",top=" t ",height=" h ",width= " w
",center=1, scrollbars=" sb ",status=0,directories=0,channelmode=0";
openwin= window.open(f , n , sFeatures );
if (!openwin.opener)
openwin.opener= self;
openwin.focus();
returnopenwin
}


기관 정보 선택용 하위 폼입니다.

선택하면(라디오 클릭) 상위 양식의 orgId 및 orgName 필드에 조직 정보(id, 이름)가 채워집니다.


html 코드

코드 복사 코드는 다음과 같습니다.

🎜>< c:iftest="${!empty pm.datas}">

="#EFF3F7 " class="TableBody1"onmouseover="this.bgColor = '#DEE7FF';"onmouseout="this.bgColor='#EFF3F7';">

;
${org.id}
${org.name}
${ org.sn }
${org.parent.name} ;



JS 코드



코드 복사

코드는 다음과 같습니다:

functionselectOrg(id,name){ if(window.opener){ window.opener.document.all .orgIdId.value= id; window.opener.document.all.orgNameId.value= 이름; window.close() }

기관정보 선택 결과


기관정보(ID, 이름) 입력이 완료되었으나 ID가 숨김 항목에 있어서 보이지 않습니다.

요약

부모폼에 대한 참고사항이라고 하면 window.opener 외에 window.parent 입니다. window.opener는 window.open을 통해 하위 폼을 여는 데 사용되고, window.parent는 iframe을 통해 하위 폼을 여는 데 사용됩니다.