Example analysis of FRAME operation problems in JS_javascript skills

The example in this article discusses the operation of FRAME in JS and is shared with everyone for your reference. The specific analysis is as follows:

The above picture is an example. Here, the mutual operations between frames are simply listed as follows: 1. Variables 2. Methods 3. Mutual acquisition of elements between pages.

1. First start from parent(frameABC)------->child(frameA,frameB,frameC)

① Access variable name name

If you operate in frameABC, then you can:

Copy code The code is as follows:

window.frames("frameA").contentWindow.name

or

Copy code The code is as follows:

document.getElementById("frameA").contentWindow.name

or

Copy code The code is as follows:

jquery: window.$("#frameA")[0] .contentWindow.name

② Access method func

If you operate in frameABC, then you can:

Copy code The code is as follows:

window.frames("frameA").contentWindow.func();

or

Copy code The code is as follows:

document.getElementById("frameA").contentWindow.func() ;

or

Copy code The code is as follows:

jquery: window.$("#frameA")[0] .contentWindow.func();

③ Access sub-page elements: username

If you operate in frameABC, then you can:

Copy code The code is as follows:window.frames("frameA").contentWindow.document.getElementById("username" );

or

Copy code The code is as follows:document.getElementById("frameA").contentWindow.document.getElementById ("username");

or

Copy code The code is as follows:jquery: window.$("#frameA")[0] .contentWindow.$("#username");

2. Then from child (frameA, frameB, frameC)------------> to parent (frameABC)

① Access the parent page variable name. If you operate in frameA (subpage), you can:

Copy code The code is as follows:window.parent.name;

② Access the parent page method func. If you operate in frameA (subpage), you can:

Copy code The code is as follows:window.parent.func();

③ Access the parent page element username. If you operate in frameA (subpage), you can:

Copy code The code is as follows:window.parent.$("#username")

Or:

Copy code The code is as follows: window.parent.document.getElementById("username");

Summary:

Frame is just a page frame. If you want to operate the elements in the subframe, you need to enter the window or contentWindow first. To access the parent page from a child page, you need to calculate the parent-child relationship and divide it into several layers.

I read other posts online about page loading issues. It probably means that operating elements before the sub-frame page is loaded will cause bugs. Interested friends can test it in a targeted way, and I believe there will be new gains!

I hope this article will be helpful to everyone’s JavaScript programming design.