Summary of javascript Parent and Child page interaction skills, javascript Interaction

Summary of javascript Parent and Child page interaction skills, javascript Interaction

Frames are used to store sub-pages, either iframe or frameset. The window object is a global object, and all functions and objects on the page are in its scope.
1. parent indicates the parent window. If the parent window has several layers of nesting, top indicates the top-level parent window.
Self indicates the window itself.

If (self = top) {//} determines whether the window is in the top-level if (self = parent) {} // You can also

2.1 access the child page elements on the parent page. The elements of the Child page are all in their own temporary Doc ument object. Get it first and then let's talk about it.
It is best to set the name attribute for frames, which is the most convenient operation. For example

<iframe name="test" src="child.html"></iframe>

If you want to obtain the element whose id is 'menu 'in child.html, you can write it like this:

Window. frames ["test" 2.16.doc ument. getElementById ('menu '); // Since all functions are stored in the window object, you can remove window: frames ["test" example .doc ument. getElementById ('menu '); // in the browser, the frame name attribute is equivalent to the window object of the subpage by default. Therefore, you can further abbreviated it as test.doc ument. getElementById ('menu ');

2.2 access sub-page functions or objects on the parent page. The function and object of the subpage are in the window object. The key is to obtain the object.

// If child.html defines the showMesg function and needs to be called in the parent, write window. frames ['test']. showMesg (); // abbreviated form test. showMesg (); // Similarly, the object accesses alert (test. person );

2.3 other methods for obtaining documents.
Use 'document. getElementById () 'or 'document. getElementsByTagName () 'obtains the frame as an Element under the document and then accesses its attributes contentDocument/contentWindow (exclusive to iframe and frame). The first ie7 is not supported, the second chrome is not supported.

<Iframe id = "testId" src = "child.html"> </iframe> // ===== var doc = document. getElementById ('testid'); // or var doc = document. getElementsByTagName ('iframe') [0]; then var winOrdoc = doc. contentDocument | doc. contentWindow; // select an if(winOrdoc.document)winOrdoc=winOrdoc.doc ument; winOrdoc. getElementById ('menu '); // write if (winOrdoc. defaultView) winOrdoc = winOrdoc. defaultView;

3.1 Access the parent page element on the Child page. Si lutong 2.1,get the parent window named Doc ument object first

Parent.window.doc ument. getElementById ('parentmenu '); // abbreviated as parent.doc ument. getElementById ('parentmenu ');

3.2. The child page accesses the function or object of the parent page. The idea is the same as 2.2. first obtain the parent window object.

parent.parentFunction();

Finally, I will mention the same-origin policy of js, that is, the js Code on website A cannot access the content on website B, even if the Code comes from website B. If the frame is a page of another website, when accessing each other using the above method, the browser should prompt: 'No authorization' error.

Based on HTML, Javascript can be used to develop interactive Web pages

As the two mentioned above, you can bind events to controls for interaction. However, JavaScript is only a client language and can only run on the client.

If you want to interact with the background database, dynamic languages are indispensable. You also need to use AJAX

Javascript subwindow calls parent window

FraInterface is the name of a custom frame. It is implemented by setting the name attribute in the frame tag.
The above code is to use the parent public interface to interact with each frame, that is, to call the afterSubmit () method in the frame with the same parent name franInterface.