window.parent와 window.opener의 차이점 JavaScript는 기본 창 메서드를 호출합니다.
1: window.parent는 상위 페이지 객체를 호출하는 iframe 페이지의 예입니다.
a.html
HTML 코드<html>
<head><title>상위 페이지</title></head>
<본문>
<양식 이름="양식1" id="양식1">
<input type="text" name="사용자 이름" id="사용자 이름"/>
</form>
<iframe src="b.html" 너비=100%></iframe>
</body>
</html>
많은 업로드 기능과 마찬가지로 b.htm의 a.htm에 있는 사용자 이름 텍스트 상자에 값을 할당해야 하는 경우 업로드 기능 페이지는 업로드가 성공한 후 텍스트 상자에 업로드됩니다. 상위 페이지의
HTML 코드는
b.html로 작성되어야 합니다.
<스크립트 유형="텍스트/자바스크립트">
var _parentWin = window.parent;
_parentWin.form1.username.value = "xxxx" ;
</script>
인스턴스 주소: http://www.cnspry.cn/blog/attachments/window.parent instance/a.html
소스 코드:
1.a.html
HTML 코드
<html>
<머리>
<title>메인 페이지</title>
<스크립트>
/** 상위 창의 전역 변수를 호출하는 IFrame 하위 창을 테스트하기 위해 추가된 테스트 변수*/
var parentVairous = "상위 창의 전역 변수를 호출하는 IFrame 하위 창을 테스트하기 위해 추가된 테스트 변수";
함수 parentInvokeIFrame()
{
var iframeTest = document.frames["iframeTest"]; //document.getElementById("iframeTest")를 사용할 수도 있습니다.
경고(iframeTest.document.body.innerHTML);
경고(iframeTest.iFrameVair);
}
</script>
</head>
<본문>
<양식 이름="양식1" id="양식1">
<input type="text" name="사용자 이름" id="사용자 이름"/>
<input type = "button" value = "상위 창은 IFrame 하위 창의 콘텐츠를 호출합니다." onclick = 'parentInvokeIFrame()'/>
</form>
<iframe src="b.html" 너비 = '100%' id = 'iframeTest'></iframe>
</body>
</html>
1.b.html
HTML 코드
<html>
<머리>
<제목></제목>
<스크립트 유형="텍스트/자바스크립트">
/** IFrame 하위 양식의 전역 함수를 호출하는 상위 양식을 테스트하기 위해 추가된 하위 창 전역 함수*/
var iFrameVair = "IFrame 하위 양식의 전역 기능을 호출하기 위해 상위 양식을 테스트합니다.";
functionUpdateParent()
{
var _parentWin = window.parent;
_parentWin.form1.username.value = "xxxx" ;
}
함수 childInvokeParent()
{
var parentVairous = window.parent.window.parentVairous;
경고(parentVairous);
}
</script>
</head>
<본문>
<양식 이름="양식1" id="양식1">
<p> </p>
<p 정렬="중앙">
<입력 유형 = "버튼"
이름 = "버튼"
아이디 = "버튼"
value = "기본 페이지의 UserName 콘텐츠 업데이트"
onclick = "UpdateParent()">
<입력 유형 = "버튼"
이름 = "버튼2"
아이디 = "버튼2"
value = "상위 창의 전역 변수를 호출하려면 IFrame 하위 창을 테스트하세요."
onclick = "childInvokeParent();"/>
</p>
<p> </p>
</form>
</body>
</html>
ps: 도메인 간 획득이 불가능합니다. 예를 들어 iframe의 src가 'http://www.xxx.ccc/'인 경우 획득할 수 없습니다.
2: window.opener는 상위 페이지 객체 인스턴스 주소를 호출하는 window.open에 의해 열리는 하위 페이지입니다: http://www.cnspry.cn/blog/attachments/window.opener 인스턴스/a.html
소스 코드:
2.a.html
HTML 코드
<html>
<머리>
<title>메인 페이지</title>
<스크립트 유형="텍스트/자바스크립트">
/** 상위 창의 전역 변수를 호출하는 IFrame 하위 창을 테스트하기 위해 추가된 테스트 변수*/
var parentVairous = "상위 창의 전역 변수를 호출하는 IFrame 하위 창을 테스트하기 위해 추가된 테스트 변수";
/**
* IFrame과 다르기 때문에(IFrame에는 id가 있고, window.open()은 IFrame의 부모-자식 창과 모드가 다릅니다),
* 따라서 window.open() 메서드를 통해 새 창을 열 때 새 창의 객체가 있어야 합니다.
* 물론, 하위 창의 변수가 호출되기 전에 하위 창이 먼저 팝업되어야 합니다. 그렇지 않으면 예외가 발생합니다.
*/
varOpenWindow;
함수 openSubWin()
{
OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolsbar=no, menubar=yes, scrollbars=yes,resizing=yes,location =아니요, 상태=아니요');
}
함수 parentInvokeChild()
{
if(OpenWindow)//물론 하위 창의 변수가 호출되기 전에 하위 창이 먼저 팝업되어야 합니다. 그렇지 않으면 예외가 발생합니다.
{
경고(OpenWindow.iFrameVair);
}
}
</script>
</head>
<본문>
<양식 이름="양식1" id="양식1">
<input type="text" name="사용자 이름" id="사용자 이름"/>
<input type="button" value="하위 페이지 팝업" onclick = "openSubWin()">
<input type="button" value="팝업 창에서 전역 변수 테스트 호출" onclick = "parentInvokeChild()">
</form>
</body>
</html>
2.b.html
HTML 코드
<html>
<머리>
<title>하위 페이지</title>
<스크립트 유형="텍스트/자바스크립트">
/** IFrame 하위 양식의 전역 함수를 호출하는 상위 양식을 테스트하기 위해 추가된 하위 창 전역 함수*/
var iFrameVair = "IFrame 하위 양식의 전역 기능을 호출하기 위해 상위 양식을 테스트합니다.";
functionUpdateParent()
{
var _parentWin = window.opener;
_parentWin.form1.username.value = "xxxx" ;
}
함수 childInvokeParent()
{
var parentVairous = window.opener.window.parentVairous;
경고(parentVairous);
}
</script>
</head>
<본문>
<양식 이름="양식1" id="양식1">
<p> </p>
<p 정렬="중앙">
<입력 유형="버튼"
onclick = "UpdateParent();"
이름="버튼"
아이디="버튼"
value="기본 페이지의 UserName 콘텐츠 업데이트">
<입력 유형 = "버튼"
이름 = "버튼2"
아이디 = "버튼2"
value = "상위 창의 전역 변수를 호출하려면 IFrame 하위 창을 테스트하세요."
onclick = "childInvokeParent();"/>
</p>
<p> </p>
</form>
</body>
hanjs에서 알림을 받은 후 모달 창의 하위 창은 상위 창 페이지의 콘텐츠를 수정할 수 없다는 점에 유의하는 것이 정말 중요합니다.
예를 들어 다음과 같이 수정합니다: OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolsbar=no, menubar=yes, scrollbars=yes, 크기 조정 가능= 예, 위치=아니요, 상태=아니요');
대상: OpenWindow = window.showModalDialog("b.html",'newwindow',"dialogHeight:100px,center:yes,resizing:no,status:no");
자식 창에서 부모 창의 내용을 수정하려고 하면 "XX"가 비어 있거나 객체가 아니라는 오류가 뜨는데 여기서 "XX"는 수정하려는 부모 창의 내용입니다.