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()

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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