How to obtain and operate elements in iframe in JS

I. requirements and problems

The iframe framework layout is used in the background management of the website, including the top menu, left navigation, and home page. Requirement: click a button on the home page, and the "exit" link is displayed on the right of the top menu bar. Click to exit the system.

My idea is: place an invisible escape link on the top menu page. When a user clicks the button on the main page (mainpage.htm) in iframe, "exit" is displayed on the right of the top menu page ".

The problem I encountered now is: HTML elements in response?

2. Get and operate the elements in iframe through JS to solve the problem

Here, we mainly use JS to operate Window objects. The Window object indicates the window opened in the browser. If the document contains a frame (frame or iframe tag), the browser creates a Window object for the HTML document, create an additional window object for each frame.

After checking the information on the Internet, I found the method for JS to operate the HTML element in iframe. Example.

Copy codeThe Code is as follows: function ShowExit (){
// Obtain the window object of iframe
Var topWin = too many top.doc ument. getElementById ("topNav"). contentWindow;
// Operate the HTML element through the obtained window object, which is the same as the normal page
TopWin.doc ument. getElementById ("exit"). style. visibility = "visible ";
} Note: In the first step, you can refer to top.doc ument. getElementById ("topNav" example taken the iframe object of the top menu (toppage.htm); Step 2: Obtain the window object of the iframe element obtained in the previous step through the contentWindow attribute of the iframe object; step 3, the window object obtained in the previous step is used to operate the elements in the iframe framework, which is the same as the common HTML elements that are not in the iframe framework.