Use of IFRAME labels

Use of IFRAME labels

Author: Qiu Shi Source: taoba, Tianji webpage updated:

Looking at the current website, the speed of the website is a little slow, but almost every page has a lot of identical things, such as banner, topic pictures, and copyright. Of course, out of the need for uniform website styles and advertising effects, there is nothing wrong with it. After all, it makes the user's wallet get rid of the money for these "embellishment" things. Is there a way, so that these identical items do not need to be downloaded again after being downloaded once, but only the webpage content in the areas where the content is changed? The answer is yes: Apply the IFRAME mark! I. Use of IFRAME tags When you mention IFRAME, you may have already threw it into the "forgotten corner", but it is no stranger to the brother frame. Frame tag is the frame tag. The multi-frame structure is to display multiple HTML files in a browser window. Now, we have encountered a very practical situation: for example, there is a tutorial on a section, make a link at the end of each page "previous section" and "next section". Except for the content of each tutorial, the content of other sections of the page is the same, if a page-by-page stupid page is created, it seems annoying. In this case, there is a strange idea. If there is a way to keep the rest of the page unchanged, make the tutorial a one-page content page without any other content. When you click the up or down page Link, only the content of the tutorial is changed, and the rest remains unchanged. In this way, the first step is to save time, in the future, if there is a change in length, length, and length, it will be very convenient; more importantly, we will not download all the things on almost every page, such as banner, column list, and navigation. IFRAME tag, also known as floating frame tag, can be used to embed an HTML document into an HTML file for display. It is different from the largest feature of frame tag, that is, the HTML file referenced by this tag is not displayed independently of other HTML files, but can be directly embedded in an HTML file, it is integrated with the content of this HTML file and becomes a whole. In addition, the same content can be displayed multiple times in a page without having to write the content repeatedly, A metaphor for an image is "picture-in-picture" TV. Now let's talk about the use of the IFRAME tag. The format of the IFRAME tag is: <IFRAME src = "url" width = "X" Height = "X" scrolling = "[Option]" frameborder = "X"> </iframe> SRC: file path, which can be either an HTML file or a text file or an ASP file; Width and height: the width and height of the "picture-in-picture" area; Scrolling: when the specified HTML file of SRC is not displayed in the specified area, the scroll option is displayed. If it is set to no, no scroll bar is displayed. If it is set to Auto:, the scroll bar is automatically displayed; if yes, it is displayed; Frameborder: The Border width of the area. It is usually set to 0 to make the "picture in the picture" and the adjacent content combine. For example: <IFRAME src = "http://netschool.cpcw.com/homepage"; width = "250" Height = "200" scrolling = "no" frameborder = "0"> </iframe> 2. Mutual control between the parent form and floating frame is in the scripting language and object layer. The window containing IFRAME is called the parent form, while the floating frame is called the child form, it is important to understand the relationship between the two, because to access the child form in the parent form, or to access the child form, the object hierarchy must be clear to access and control the form through the program. 1. Access and control objects in the child form in the parent form In the parent form, IFRAME is a child object of the Document Object. You can directly access the objects in the child form in the script. Now there is a problem, that is, how to control this IFRAME. here we need to talk about the IFRAME object. After setting the ID attribute for this tag, you can use the Document Object Model Dom to control the HTML contained in IFRAME. For example, you can embed the test.htm file in example.htmand control some marked objects in test.htm: <IFRAME src = "test.htm" id = "test" width = "250" Height = "200" scrolling = "no" frameborder = "0"> </iframe> The code of the test.htm file is: <HTML> <Body> <H1 id = "myh1"> Hello, my boy </Body> </Html> If we want to change the text in the H1 mark with the ID number myh1 to hello, my dear, it is available: Document. myh1.innertext = "hello, my dear" (where, document can be saved) In the example.htm file, the sub-forms indicated by the IFRAME mark object are consistent with the common DHTML Object Model. The access control method for the object is the same, so we will not repeat them here. 2. Access and control objects in the parent form in the child form In the child form, we can use its parent (parent) object to access the objects in the parent window. For example, example.htm: <HTML> <Body onclick = "alert (TT. myh1.innerhtml)"> <IFRAME name = "TT" src = "frame1.htm" width = "250" Height = "200" scrolling = "no" frameborder = "0"> </iframe> <H1 id = "myh2"> hello, my wife </Body> </Html> If you want to access the title text in myh2 with the ID number in frame1.htm and change it to "Hello, my friend", you can write as follows: Parent. myh2.innertext = "Hello, my friend" In this case, the parentobject represents the form in which the front window (example.htm) is located. To access the objects in the parent form in the child form, all objects in the parent form are carried out through the parent object without exception. Although IFRAME is embedded in another HTML file, it remains relatively independent. It is an "independent kingdom". The features in a single HTML file are also applicable to floating frames. Imagine using the IFRAME flag, we can express the unchanged content in IFRAME, so that we do not have to write the same content repeatedly, which is a bit like a process or function in programming, how much tedious manual work has been saved! In addition, it is vital that the modification of the page is more feasible, because you only need to modify the layout of a parent form instead of modifying each page because of the layout adjustment. One thing to note is that the nestscape browser does not support IFRAME tags, but it does not seem to be a major problem in the world of IE nowadays. IFRAME tags are widely used, and they both think about themselves (websites, he also saved network fees for netizens. Why not? Example: <IFRAME src = "page" width = "width" Height = "height" align = "can be left or right, center "scrolling =" whether a scroll bar exists. You can enter NO or yes "> </iframe> <IFRAME frameborder = 0 framespacing = 0 Height = 25 marginheight = 0 marginwidth = 0 scrolling = no name = Main src = "BGM/bgm.html" width = 300> </iframe> 2 ::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::: :: When IFRAME is used, I find that the scroll bar is not beautiful. I want to use two images instead of the scroll bar. How should we implement it? Answer: Use the following code to replace <title> .. </title> <Script language = "JavaScript"> Function scroll (N) {Temp = N; Out1.scrolltop = out1.scrolltop + temp; If (temp = 0) return; SetTimeout ("scroll (temp)", 80 ); } </SCRIPT> & Lt; table width = "330" & gt; <Tr> <TD width = "304" valign = "TOP" rowspan = "2"> <Div id = out1 style = "width: 100%; Height: 100; overflow: hidden; border-style: dashed; border-width: 1px, 1px, 1px, 1px;"> Text <br> text <br> Text <br> Text <br> Text <Br> <Br> </Div> </TD> <TD width = "14" valign = "TOP"> </TD> </Tr> <Tr> <TD width = "14" valign = "bottom"> </TD> </Tr> </Table>