Web page making basic skills the interaction between frames (frame windows)

Source: Internet
Author: User
Tags key window
Skills | interactive | Web page

In a multiple-window frame-by-page, the information interaction between the various Windows is often the case. When you have a hyperlink in the navigation window, how do you open a linked page in another window? Can I press the button in this window to write a message in another window? window so many, and how to identify the window? Take a look at the example below.

  One, click on the link in the Navigation window, open the page in another window

Existing one-frame page as shown above, window A is the website logo and advertising, b window is the navigation bar, C is the window to display the page. The source code for the frame page is:

<frameset rows= "20%,*" >
<frame name= "Topframe" scrolling= "NO" noresize src= "toppage.htm" >
<frameset cols= "18%,*" >
<frame name= "Leftframe" noresize src= "leftpage.htm" >
<frame name= "MainFrame" src= "mainpage.htm" >
</frameset>
</frameset>

If the link page (test.htm) in the b window is required to open in the c window, the link in the b window should be written as follows: <a herf= "test.htm" target= "Mailframe" > This linked page opens in c window </a> , the target parameter in the <A> tag is key here, and you want to open the page in that window and set the name of that window in the target parameter.

  Second, in the b window press a button, in the c window to write a line of words

In this example, the page format is the same as the previous example, the effect is as follows: Press the "Write in c Window" button in the b window, a line of text appears in the c window "Hi!" How are you doing! This is the word that is written through the b window control. ”。 The code for the frames page and the page file in each window are the same as the previous example.

Production method:

1, in the C window page (mainpage.htm) source code

<script language= "Javascript" >
<!--
function Htest () {
document.write ("Hi!") How are you doing! This is the word that is written through the b window control. ")
}
-->
</script>

The purpose of this program is to write a paragraph of text in the current window.

2. How do I invoke the program in the c window in the b window? First look at the b window "write in c window" This button source code:

<input type= "button" value= "Write in c window" >

In this code, the key is the code "Parent.mainframe", where the introduction of a new concept-window structure relationship, that is, in a multiple-window page, the relationship between the windows is determined by what principle. The principle of the window relationship is that the window separated by the current window is the "child window" (children) of the current window, and the current window is the parent of the split window. As in this example, the relationships between the windows are as follows:

As you can see from the table above, the browser window is the parent window for the topframe and lower windows, and the lower window is the parent window of the Leftframe and MainFrame two windows. The connection between the two windows must go through their parent window, so in this case, the call to "Htest ()" On the page in the C window is obviously through the parent of C and B to the mainframe, and then the Htest () program is invoked.

Then if the c window to the b window to write the code is such:; Then, in a window to the c window to write a text of the code you know how to write? Yes, that's it:.

From the example above, it can be seen that the interactive information between the Windows, the key problem is to understand the window and the relationship between the window, the other operation is relatively simple.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.