JS operates dom in iframe (explanation with examples)_javascript skills

You can understand by directly assigning the following code and testing:

1.html:

Copy code The code is as follows: Untitled Document ======================Note: Testing starts here==== ===================== is used to test that the subform iframeA accesses the parent form An element

======================iframe dividing line====== =================== ======================iframe dividing line======== ================= Let’s demonstrate first: the parent form accesses a method or element in the child form Summary: The parent form accesses the child form in different ways than the elements

> //Get the element of iframe function getIframe(id){ return document.getElementById(id).contentWindow.document; } //The parent window accesses the child window element function frameDiv(){ getIframe("frameA").getElementById("ooxx").style.backgroundColor="#f00" //window.frames["iframeA"].getElementById("ooxx"). style.backgroundColor="#f00" //An element cannot be accessed in this form } //The parent window accesses the child window method function frameFun(){ //getIframe("frameB ").getsFun();//You cannot access a certain method of the subform in this way // window.frames["iframeB"].getsFun(); alert(window.frames["iframeB" ].getsFun()); }

a.html

Copy code The code is as follows: Untitled document Used to test the parent form accessing an element in the child form Used to test that child window B accesses an element of form A

1. Child window iframeA accesses an element of the parent window

//The child window accesses an element of the parent window function frameToPdiv(){ parent. document.getElementById("pox").style.color="#fff"; parent.document.getElementById("pox").style.backgroundColor="#f0a0f0" } //Sub Window access parent window method function frameToPfun(ss){ parent.testP("ssss"); } //Method for testing iframeB access function testBA(){ alert("Method for testing iframeB access") }

b.html Copy code The code is as follows: Untitled document

Access an element of subform A" onclick="frameTframeDiv()" /> //Subform B accesses an element of subform A function frameTframeDiv(){ / /parent.document.getElementById("frameA").contentWindow.document.getElementById("divooxx").style.color="#a0c0f0"; //parent.document.getElementById("frameA").contentWindow. document.getElementById("divooxx").style.backgroundColor="#000" var _bframe=parent.getIframe("frameA");//The child form accesses the parent form method _bframe.getElementById(" divooxx").style.color="#a0c0f0"; _bframe.getElementById("divooxx").style.backgroundColor="#000"; } //Subform B accesses the subwindow A method of body A function frameTframeFun(){ window.parent.frames["frameA"].testBA(); } function getsFun(){ return "sssssss"; } //getFun()