JS method to obtain and operate elements in iframe_javascript skills

Several methods of JS getting/setting object elements and documents in iframe

1. IE only (image positioning through frames index):

Copy code The code is as follows:

document.frames[i].document.getElementById('ID of element');

2. IE only (image positioning through iframe name):

Copy code The code is as follows:

document.frames['name of iframe'].document.getElementById('ID of element');

The above method is not only applicable to iframes, but also to frames in frameset. Although IE is good at setting its own standards, I have to say that many of its designs are more humane. For example, this one provides a concise and visual writing method in addition to supporting the following standard paths.

3. General method:

Copy code The code is as follows:

document.getElementById('iframe's ID').contentWindow.document.getElementById('element's ID')

Be careful to add contentWindow. Problems often occur because this is easily overlooked. It represents the window object inside the frame and iframe.

JS gets iframe document content

Copy code The code is as follows:

Note: The above .contentDocument is equivalent to .contentWindow.document!

1. Demands and problems encountered

Iframe layout is used in the background management of the website, including the top menu, left navigation and main page. The requirement is: click a button on the main page and display the "Exit" link on the right side of the top menu bar. Click to exit the system.

My idea is: put an invisible "exit" link on the top menu page. When the user clicks the button in the main page (mainPage.htm) located in the iframe, it will be displayed on the right side of the top menu page. "quit".

The problem I am encountering now is: How to obtain and operate HTML elements in other iframe subpages (such as topPage.htm) in an iframe subpage (mainPage.htm) of the page?

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

The main purpose here is to operate the Window object through JS. The Window object represents an open window in the browser. If the document contains frames (frame or iframe tags), the browser creates a window object for the HTML document and an additional window object for each frame.

After I checked the information on the Internet, I found the method of JS operating HTML elements in iframe. Examples are as follows.

Copy code The code is as follows:

           function ShowExit() {
//Get the window object of iframe
            var topWin = window.top.document.getElementById("topNav").contentWindow;
//Operate HTML elements through the obtained window object, which is the same as a normal page
               topWin.document.getElementById("exit").style.visibility = "visible";
          } 

Note: In the first step, the iframe object where the top menu page (topPage.htm) is located is obtained through the window.top.document.getElementById("topNav") method; in the second step, the iframe object obtained in the previous step is obtained The contentWindow attribute obtains the window object where the element in the iframe is located; the third step is to operate the elements in the iframe frame through the window object obtained in the previous step, which is the same as operating ordinary HTML elements not in the iframe frame.