JS는 iframe에서 DOM을 운영합니다(예제와 함께 설명)_javascript 기술

다음 코드를 직접 할당해서 테스트해보면 이해하실 수 있습니다.

1.html:

코드 복사 코드는 다음과 같습니다 : 제목 없는 문서 =======================참고: 테스트는 여기에서 시작됩니다=== = =================== 상위 양식 요소

======================iframe 구분선==== == =================== =======================iframe 구분선==== ==== ================ 먼저 살펴보겠습니다. 상위 양식은 하위 양식의 메서드나 요소에 액세스합니다. /p&gt ; 요약: 상위 양식은 요소와 다른 방식으로 하위 양식에 액세스합니다

> / /iframe의 요소 가져오기 function getIframe(id){ return document.getElementById(id).contentWindow.document; } //상위 창은 하위 창 요소에 액세스합니다. function frameDiv(){ getIframe("frameA").getElementById("ooxx").style.BackgroundColor="#f00" //window.frames["iframeA"].getElementById("ooxx") . style.BackgroundColor="#f00" //이 형식에서는 요소에 액세스할 수 없습니다. } //상위 창이 하위 창 메서드에 액세스합니다. function frameFun(){ //getIframe ("frameB ").getsFun();//이 방법으로는 하위 양식의 특정 메서드에 액세스할 수 없습니다. // window.frames["iframeB"].getsFun(); Alert(window.frames ["iframeB" ].getsFun()); }

a.html

코드 복사 코드는 다음과 같습니다. 제목 없는 문서 하위 양식의 요소에 액세스하는 상위 양식을 테스트하는 데 사용됩니다. 하위 창 B가 A

1 형식의 요소에 액세스하는지 테스트하는 데 사용됩니다. 하위 창 iframeA는 상위 창

//자식 창이 부모 창의 요소에 액세스합니다 function frameToPdiv(){ 부모.document.getElementById("pox").style.color="#fff"; parent.document.getElementById("pox").style.BackgroundColor="#f0a0f0" } //하위 창 액세스 상위 창 메서드 function frameToPfun(ss){ parent.testP("ssss"); } //iframeB 액세스 테스트 방법 function testBA( ){ Alert("iframeB 액세스 테스트 방법") }

b.html 코드 복사 코드는 다음과 같습니다. 제목 없는 문서

하위 양식 A의 요소에 액세스" onclick="frameTframeDiv()" /> //하위 양식 B가 하위 양식 A의 요소에 액세스합니다 function frameTframeDiv(){ / /parent.document .getElementById("frameA").contentWindow.document.getElementById("divooxx").style.color="#a0c0f0"; //parent.document.getElementById("frameA").contentWindow. "divooxx").style.BackgroundColor="#000" var _bframe=parent.getIframe("frameA");//하위 양식은 상위 양식 메소드에 액세스합니다 _bframe.getElementById(" divooxx"). style.color="#a0c0f0"; _bframe.getElementById("divooxx").style.BackgroundColor="#000"; } //하위 폼 B는 본문 A의 하위 창 A 메서드에 액세스합니다 함수 프레임TframeFun(){ window.parent.frames["frameA"].testBA(); } 함수 getsFun(){ return "sssssss"; } //getFun() &lt ;/html>