Analysis of the differences between Iframe and FRAME
|
1. Use of Iframe tag <br />When it comes to Iframe, you may have thrown it into the "forgotten corner", but you will be familiar with its brother Frame. The Frame tag is a frame tag. What we call a multi-frame structure is displaying multiple HTML files in one browser window. Now, we encounter a very realistic situation: for example, there is a tutorial, which is presented section by section, with a "Previous Section" and "Next Section" link at the end of each page. Except for the different content of each tutorial, the rest of the page content is the same. If we make stupid pages one by one, it seems too boring. At this time, I suddenly have an idea. If there is a way to keep the rest of the page unchanged, and only make the tutorial into a page of content pages without other content, when clicking the up and down page links, only the tutorial content part will change, and the rest will remain unchanged. In this way, on the one hand, it saves time, and on the other hand, if there are any changes in the tutorial in the future, it will be very convenient without affecting the whole team; more importantly, those advertising banners, column lists, navigation and other things that are on almost every page are downloaded only once and then not downloaded again. The Iframe tag, also known as the floating frame tag, allows you to embed an HTML document in an HTML document for display. The biggest difference between it and the Frame tag is that the HTML file referenced by this tag is not displayed independently of other HTML files, but can be directly embedded in an HTML file and integrated with the content of this HTML file to become a whole. In addition, the same content can be displayed multiple times in a page without having to repeat the content. A vivid metaphor is a "picture-in-picture" TV. Now let's talk about the use of Iframe tags. The format of the Iframe tag is: <Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe> src: The path of the file, which can be an HTML file, text, ASP, etc. Width, height: the width and height of the "picture-in-picture" area; scrolling: When the HTML file specified by SRC cannot be fully displayed in the specified area, the scrolling option, if set to NO, no scroll bar will appear; if set to Auto: the scroll bar will appear automatically; if set to Yes, it will be displayed; FrameBorder: The width of the area border. In order to allow the "picture-in-picture" to blend with the adjacent content, it is often set to 0. for example: <Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe> 2. Mutual control between parent form and floating frame <br />In scripting language and object hierarchy, the window containing Iframe is called parent form, and the floating frame is called child form. It is important to understand the relationship between the two, because in order to access the child form in the parent form or vice versa, you must understand the object hierarchy in order 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, the Iframe, i.e., the child form, is a child object of the document object. Objects in the child form can be accessed directly in the script. Now there is a question, that is, how do we control this Iframe? Here we need to talk about the Iframe object. When we set the ID attribute for this tag, we can perform a series of controls on the HTML contained in the Iframe through the Document Object Model DOM. For example, embed the test.htm file in example.htm and control some tag 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</h1> </body> </html> If we want to change the text in the H1 tag with ID number myH1 to hello, my dear, we can use: document.myH1.innerText="hello,my dear" (where document can be omitted) In the example.htm file, the sub-window pointed to by the Iframe tag object is consistent with the general DHTML object model, and the object access control method is the same, so it will not be repeated. 2. Access and control objects in the parent window in the child window. In the child window, we can access objects in the parent window through its parent object. Such as 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</h1> </body> </html> If we want to access the title text in the ID number myH2 in frame1.htm and change it to "hello, my friend", we can write it like this: parent.myH2.innerText="hello,my friend" Here, the parent object represents the current window (the window where example.htm is located). To access objects in the parent window in the child window, you must use the parent object without exception. Although Iframe is embedded in another HTML file, it remains relatively independent and is an "independent kingdom". The features in a single HTML file also apply to floating frames. Just imagine that through the Iframe tag, we can represent the unchanging content with Iframe, so there is no need to rewrite the same content. This is a bit like a process or function in programming, which saves a lot of tedious manual labor! Also, crucially, it makes page modification more feasible because, instead of having to modify each page to adjust the layout, you only need to modify the layout of the parent form. One thing to note is that the Nestscape browser does not support the Iframe tag, but in today's IE-dominated world, this does not seem to be a big deal. The widespread use of the Iframe tag not only benefits yourself (the website), but also saves Internet fees for netizens. Why not do it? Floating FRAME is a definition in the HTML4.0 specification and is supported by all current browsers. Unlike the partition represented by FRAMESET, a floating FRAME exists on the Web page as a built-in object, and its style is like a graphic or an applet on a page. Floating FRAME uses the <IFRAME> tag, which has most of the same attribute settings as <FRAME>, including: name, src, marginwidth, marginheight, FRAMEborder, and scrolling. At the same time, it also has the same height, width and align attributes as graphics or applet. Moreover, the floating FRAME follows the same target principle as the normal FRAME: we can point to it by its name. This principle applies to floating frames in any type of frame, and vice versa. The link without traget in the floating FRAME points to itself, while the _parent link points to the FRAME or window where the document containing the <IFRAME> is located. for example: <IFRAME name="floater" src="start.htm" width=150 height=200 hspace=10 align=left> <IMG src="Images/noFRAME.gif" alt="You can't see the floating FRAME" width=150 height=200 hspace=10 align=right> </IFRAME><BR> <A href="one.htm" target="floater">Show one.htm</A><P> <A href="two.htm" target="floater">Show two.htm</A><P> <A href="start.htm" target="floater">Bring back start.htm</A> Note that for browsers that support the <IFRAME> tag, any content between <IFRAME> and </IFRAME> will be ignored. Otherwise, the content will be displayed, which can be used to explain that the current browser does not support <IFRAME> |
<<: Comparison of 5 CSS scrolling ceiling implementation methods (performance upgrade version)
>>: MySQL uses SQL statements to modify table names
Recommend
vue-cropper component realizes image cutting and uploading
This article shares the specific code of the vue-...
Example of using Nginx reverse proxy to go-fastdfs
background go-fastdfs is a distributed file syste...
Detailed explanation of MySQL transactions and MySQL logs
Transactional Characteristics 1. Atomicity: After...
js realizes 3D sound effects through audioContext
This article shares the specific code of js to ac...
Analysis of two usages of the a tag in HTML post request
Two examples of the use of the a tag in HTML post...
Using JavaScript to implement carousel effects
This article shares the specific code for JavaScr...
Analysis of problems caused by MySQL case sensitivity
MYSQL is case sensitive Seeing the words is belie...
Detailed example of remotely connecting to Docker using TLS encrypted communication
By default, Docker runs over a non-networked UNIX...
What scenarios are not suitable for JS arrow functions?
Table of contents Overview Defining methods on an...
Detailed explanation of the implementation of WeChat applet track playback and the pitfalls encountered
WeChat applet trajectory playback mainly uses pol...
Detailed explanation of explain type in MySQL
Introduction: In many cases, many people think th...
How to deploy code-server using docker
Pull the image # docker pull codercom/code-server...
MySQL trigger syntax and application examples
This article uses examples to illustrate the synt...
How to increase your web performance by 3 times by turning on a parameter in Nginx
1. Some problems encountered I remember when we w...
How to use Docker to limit container resources
Problem Peeping In the server, assuming that the ...