Starting from chapter 2, Example 2-2:
HTML basics:
IFRAME tag, also known as floating frame tag, can be used to embed an HTML document into an HTML file for display. In the scripting language and object layers, the window containing IFRAME is called the parent form, while the floating frame is called the child form.
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
Entries; If yes, it is displayed;
Frameborder: Specifies whether to display the floating frame border.
0: The floating frame border is not displayed;
1: displays the floating frame border.
Other basic syntaxes:
Object Name:
Syntax: Name = #
Note: # Is the object name. This attribute is used to name an object so that other objects can use it.
Example: <IFRAME src = "iframe.html" name = "iframe1">
Size adjustment:
Syntax: noresize
Description: Private Attribute of IE. The size of a floating frame cannot be adjusted.
Example: <IFRAME src = "iframe.html" noresize>
Border thickness:
Syntax: border = #
Description: This attribute specifies the thickness of the floating frame border. The value is a positive integer and 0, in pixels. To seamlessly combine floating frames with pages, border is generally equal to 0.
Example: <IFRAME src = "iframe.html" border = 1>
Adjacent spacing:
Syntax: framespacing = #
Description: This attribute specifies the spacing between adjacent floating frames. The values are positive integers and 0 in pixels.
Example: <IFRAME src = "iframe.html" framespacing = 10>
Object ID:
You can use getelementbyid to find IFRAME as an object in the Dom.
ID can be used to obtain the IFRAME element.
For example, document. All. iframeid. src = "a.htm"
What are the differences between the ID and name attributes:
ID can be used to obtain the IFRAME element.
For example, document. All. iframeid. src = "a.htm"
The IFRAME name mainly serves to identify the window in it.
For example
<A href0000t.htm target = test> SADAF </a>
<IFRAME name = test>
In this example, t.htm will appear in IFRAME after the link is connected.
Style attributes:
Used to set the CSS style sheet
The Inline style is written in the tag. The embedded style is only valid for the tag (IFRAME ).
In the parent form, IFRAME indicates that the child form is a child object of the Document Object. You can directly access the objects in the child form in the script:
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)
Access and control objects in parent forms in child forms:
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.
Note that the nestscape browser does not support IFRAME tags.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
