HTML iframe usage summary collection_HTML/Xhtml_Web page production

Iframe usage analysis

BORDER

Set the edge width around the frame
FRAMEBODER

Set the width and height of the border
SCROLLING

Whether there is a scroll bar (YES,NO,AUTO )
SRC

Specify the file or image called by IFRAME (HTML, HTM, GIF, JPEG, JPG, PNG, TXT, *.*)
"Picture-in-picture" effect--discussing the use of IFRAME tags
Looking at today's websites, the Internet speed is a bit slow, but almost every page has to put some banners, column pictures, copyrights, etc. Of course, there is nothing wrong with a lot of similar things due to the need for a unified website style and advertising effect, but after all, the user's wallet is increasingly drained of money by these "embellishment" things. Is there any way to make this possible? After downloading these similar things once, there is no need to download them again, but only those webpage contents with changed content areas are downloaded?
The answer is definitely: apply Iframe tag!
1. Use of Iframe tag
When it comes to Iframe, you may have thrown it into the "forgotten corner", but when it comes to its brother Frame, you will not be unfamiliar. Frame tag is a frame tag. What we call a multi-frame structure is to display multiple HTML files in a browser window. Now, we encounter a very realistic situation: if there is a tutorial, it is divided into sections one by one. At the end of each page, there are links to "previous section" and "next section", except that the content of each tutorial is different. In addition, the content of other parts of the page is the same. It seems too boring to make stupid pages page by page. At this time, I suddenly thought, if there is a way to keep other parts of the page unchanged, just make the tutorial It becomes a page-by-page content page, without other content. When clicking the page up and down link, only the tutorial content part will be changed, and the other parts will remain unchanged. In this way, one saves time, and the other is that the tutorial will have three long and two short changes in the future. , is also very convenient, and will not affect the whole army; more importantly, those advertising banners, column lists, navigation and other things that are included in almost every page are only downloaded once and then no longer downloaded. Iframe tag, also called floating frame tag, you can use it to embed an HTML document in an HTML display. The biggest feature that is different from the Frame tag is that the HTML file referenced by this tag is not displayed independently from other HTML files, but can be directly embedded in an HTML file and integrated with the content of the HTML file to become a whole. In addition, , you can also display the same content multiple times on a page without having to write the content repeatedly. A vivid metaphor is "picture-in-picture" TV.
Now let’s talk about the use of Iframe tags. The usage format of
Iframe tag is:

Copy the code

The code is as follows:

src: file The path can be an HTML file, text, ASP, etc.;
width, height: the width and height of the "picture-in-picture" area;
scrolling: when the specified HTML file of SRC is in the specified area When the scrolling option is not displayed or completed, if it is set to NO, the scroll bar will not appear; if it is Auto: the scroll bar will automatically appear; if it is Yes, it will be displayed;
FrameBorder: the width of the area border, in order to make " Picture-in-picture "Blends with adjacent content, usually set to 0."
For example:

Copy code

The code is as follows:

2. The mutual control between the parent form and the floating frame. In the scripting language and object hierarchy, the window containing the Iframe is called the parent form, while the floating frame is called the child form. Clarify these two This relationship is important because to access a child form in a parent form or vice versa, you must know the object hierarchy before you can access and control the form programmatically.
1. Access and control objects in the subform in the parent form
In the parent form, the Iframe, that is, the subform, is a child object of the document object, and you can directly access the subform in the script. objects in .
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 to 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:

Copy code

The code is as follows:

test.htm file code is:

hello,my boy< /h1>

If we want to change the text in the H1 tag with the ID number myH1 to hello, my dear, it can be used :
document.myH1.innerText="hello,my dear" (document can be omitted)
In the example.htm file, the subform pointed to by the Iframe tag object is consistent with the general DHTML object model. The object access control method is the same and will not be described again.
2. Access and control objects in the parent form in the subform
In the subform, we can access the objects in the parent window through its parent (parent) object.
Such as example.htm:

Copy code

The code is as follows:

< ;html>

hello,my wife

If we want to access the title text in frame1.htm with ID number myH2 and change it to "hello, my friend", we can write like this:
parent.myH2.innerText="hello,my friend"
The parent object here represents the current form (the form where example.htm is located). You need to access the objects in the parent form in the child form, without exception. All done through the parent object.
Although Iframe is embedded in another HTML file, it remains relatively independent and is an "independent kingdom". The characteristics in a single HTML also apply to floating frames.
Just imagine, through the Iframe tag, we can express the unchanged content as an Iframe. In this way, we don’t have to write the same content repeatedly. This is a bit like a process or function in programming, saving a lot of tedious manual work. labor! In addition, and crucially, it makes page modifications more feasible, because instead of having to modify each page to adjust the layout, you only need to modify the layout of one parent form.
One thing to note is that the Nestscape browser does not support the Iframe tag, but in today's world of IE, this does not seem to be a big deal. Iframe tags are widely used, not only for their own sake (the website), but also for netizens to save money. Internet fees, why not?
Example

Copy code

The code is as follows:

< IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="bgm/bgm.html" width=300>

2 :::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
After using iframe, I found that the scroll bar is not beautiful and I want to use 2 pictures to replace it. ↑↓
How should it be implemented?
Answer:
Replace the web page's

with the following code: Copy the code

The code is as follows:

文字 文字 文字 文字 文字

内框架Iframe的使用
使用Iframe可以在一人表格内调用一个外部文件，是非常有用的。本网站在很多页面上都使用了iframe效果。
现在我们学一下Iframe标记的使用。
Iframe标记的使用格式是:

复制代码

代码如下:

src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："内部框架"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;
FrameBorder：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0。
name:框架的名字，用来进行识别。
比如:

当你想用父框架控制内部框架时，可以使用： target="框架的名字"来控制。
IFrame也可以编辑文字
有没有想过除了表单(

)之外还有其它的网页元素可以编辑文字呢？只要使用IFrame的隐藏的一个属性就可以使IFrame成为一个文本编辑器。





其中designMode属性表示IFrame的设计模式的状态（开/关），还在犹豫什么呢，快试试吧！
只要巧妙的利用这一特性就可以制作很多意想不到的效果。如果下面我们来做一个图片编辑器。

Here are some more additions:

Needless to say.
Width is the width of the inserted page; height is the height of the inserted page; scrolling is whether to display the page scroll bar (optional parameters are auto, yes, no, if this parameter is omitted, the default is auto); frameborder border size;
Note: It is recommended to use absolute paths for URLs
Legend has it:
Blackened 88*8. . .
Example 2.
If there is a frame in a page. . Just click on the link on the page and ask to open it in this
Then modify the default opening mode: Add < to the webpage HEAD a href=URL target=**>or the target frame of the partial link is set to (**)
　Example 3.
To insert a page. Ask to take only the middle part. Don't want anything else. ,. .
　Code:

Control the depth of the inserted page covered by the frame marginwidth=0 marginheight=0; Control the depth of the upper part covered by the frame vspace=-170
Whether to scroll the scroll bar ( auto, yes, no) The border size of the frameborder frame, width=776 height=2500 The size of this frame.
1. Add iframe to the page
,
scrolling indicates whether to display the page scroll bar, optional The parameters are auto, yes, and no. If this parameter is omitted, the default is auto.
2. The hyperlink points to the embedded web page. Just name the iframe. The method is , then, the hyperlink statement on the web page should be written as:
3. If frameborder is set to 1, the effect will be like a text box
Usage of transparent IFRAME
It must be supported by IE5.5 or above
In the tag of the transparentBody.htm file, I have added style="background-color=transparent" through the following four IFRAMEs I think you should have a clear understanding of how to implement the iframe background transparency effect:



Point 1: Use javascript to specify the src of the iframe and reload the iframe (see my project at the bottom of this article)
Difficulty 1: Set the background color of the iframe
a.htm
<script> <br>function setBG(){ <br>var strColor=document.bgColor; <br>frm.document.bgColor=strColor; <br>} <br></script>


Difficulty 2:
Window and floating frame Mutual control between
In the scripting language and object hierarchy, the window containing the Iframe is called the parent form, while the floating frame is called the child form. It is important to clarify the relationship between the two, because it is necessary to When accessing a subform in a parent form or vice versa, you must know the object hierarchy before you can access and control the form programmatically.
1. Access and control objects in the subform in the parent form
In the parent form, the Iframe, or subform, is a child object of the document object, and you can directly access the subform in the script. objects in .
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 to 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:
　　
test.htm文件代码为:
　　
　　　
　　　　

hello,my boy

　　　
　　
　　如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
　　document.myH1.innerText="hello,my dear"(其中，document可省)
　　在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
　　2、在子窗体中访问并控制父窗体中对象
　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
　　如example.htm：
　　
　　　
　　　　
　　　　

hello,my wife

　　　
　　
　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
　　parent.myH2.innerText="hello,my friend"
或者parent.document.getElementById("myH2").innerText="hello,my friend"
　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
3:frame的一个子元素访问frame的另一个子元素
例如：框架文件frame.html中嵌入了另外两个html文件

那么现在要在DirectoryTree.html文件中访问Search.html文件中的一个id为section的标签的innerHTML属性，则可以这样：
alert(parent.document.search.section.innerHTML),
其中search是“搜索”div的id，或者：
alert(parent.document.getElementById("search").section.innerHTML),
或者也可以这样：
alert(parent.document.frames["frameSublist"].name)(这是直接访问iframe)
　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。
　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
　　要注意的是，Nestscape6.0之前版本不支持Iframe标记。
　　例子：
1:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
用了iframe后 发现滚动条不漂亮 想用2个图片来代替↑↓
应该怎么实现呢？
回答：
用下列代码替换网页的

文字 文字 文字 文字 文字

:::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::
The following code can implement IFrame adaptive height, that is, it automatically adapts to the length of the page to avoid scroll bars appearing on the page and IFrame at the same time.
The source code is as follows

HTML