IFrame(画中画,浮动帧标记)
来源:互联网 发布:练歌的软件 编辑:程序博客网 时间:2024/06/03 18:42
一:IFrame标记的说明
Iframe标记,又叫浮动帧标记,你可以用它将一个HTML文档嵌入在另外一个HTML中显示。它与Frame标记最大的特征即这
个标记所引用的HTML文件不是与另外一个HTML文件相互独立显示,而是<优点一>可以直接嵌入在一个HTML文件中,与这个
HTML文件内容相互融合,成为一个整体,另外,<优点二>还可以多次在一个页面内显示同一内容,而不必重复写内容,一个形象
的比喻即“画中画”。
例如:如有一个教程,是一节一节地上,每页末尾做一个“上一节“、“下一节“的链接,除了每节教程内容不同之外,页面
其它部分内容都是相同的,如果一页一页地做笨页面,这似乎太让人厌烦了,这时突发奇想,如果有一种方法让页面其它地方不
变,只将教程做成一页一页的内容页,不含其它内容,在点击上下翻页链接时,只改变教程内容部分,其它保持不变,这样,一是
省时,另则以后如教程有个三长两短的变动,也很方便,不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航
等几乎每页的都有的东西只下载一次后就不再下载了。
二:IFrame标记的使用
<Ifram src="URL" width="X" height="X" scolling="" frameborder=""></iframe>
src:接文件的URL,可以是HTML ,文本,ASP,flash等。
width,height:画中画区域的宽与高。
scrolling:当src链接的内容不能在画中画指定的区域中显示完全时,是否出现滚动条 。
scrolling:no (不显示滚动条)
scrolling:auto(自动出现滚动条)
scrolling:yes (显示滚动条)
默认出现滚动条。
frameBorder:画中画指定的区域是否显示边框,为了让画中画与邻近的内容相融合,常设置为0。
frameBorder:0 (不显示边框)
frameBorder:1 (显示边框)
默认显示边框。
演示如下:IFrameDemo1.html插入Menu.html
Menu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>目录</title>
</head>
<body>
<div>
<pre>
视频 优酷网 奇艺高清 土豆网 搜狐视频 乐视网 迅雷看看 百度视频 更多>>
影视 电视剧 电影 动漫 综艺 直播 爱情公寓3 十万个冷笑话.动画 更多>>
</pre>
</div>
</body>
</html>
Menu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>画中画</title>
</head>
<body>
<iframe src="Menu.html" width="400" height="70" scrolling="no" frameborder="1" ></iframe>
</body>
</html>
三:父窗体与IFrame之间的相互控制
在脚本语言与对象层次中,包含Iframe的窗口我们称之为父窗体,而浮动帧则称为子窗体,弄清这两者的关系很重要,因
为要在父窗体中访问子窗体或相反都必须清楚对象层次,才能通过程序来访问并控制窗体。
1、在父窗体中访问并控制子窗体中的对象
在父窗体中,Iframe即子窗体是document对象的一个子对象,可以直接在脚本中访问子窗体中的对象。
现在就有一个问题,即,我们怎样来控制这个Iframe,这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后,就
可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。
比如在example.htm里嵌入test.htm文件,并控制test.htm里一些标记对象:
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
如我们要改变ID号为myH1的H1标记里的文字为hello,my dear,则可用:
document.myH1.innerText="hello,my dear"(其中,document可省)
在example.htm文件中,Iframe标记对象所指的子窗体与一般的DHTML对象模型一致,对对象访问控制方式一样,就不再赘述。
2、在子窗体中访问并控制父窗体中对象
在子窗体中我们可以通过其parent即父(双亲)对象来访问父窗口中的对象。
如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>
如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend",我们就可以这样写:
parent.myH2.innerText="hello,my friend"
这里parent对象就代表当前窗体(example.htm所在窗体),要在子窗体中访问父窗体中的对象,无一例外都通过parent对象来进行。
备注:
有一点要注意,Nestscape浏览器不支持Iframe标记,但在时下IE的天下,这似乎也无大碍,广泛采用Iframe标记,既为自己(网站)着了想,又为网友节省了网费,何乐而不为?
- IFrame(画中画,浮动帧标记)
- 画中画iframe
- html iframe画中画标签
- 网页的“画中画”———IFRAME标记的用法及示例
- ifram --的详细用法(浮动帧标记)
- “画中画”效果--谈IFRAME标签的使用
- 网页:“画中画”效果--IFRAME标签的使用
- :“画中画”效果--IFRAME标签的使用
- iframe标签——HTML中的“画中画”
- Android 浮动窗口进阶——画中画,浮动视频
- 画中画
- 浮动框架iframe
- 浮动框架iframe元素
- iframe--浮动窗口
- Iframe标记的使用
- Iframe标记的使用
- Iframe标记的使用
- html框架 FrameSet,Frame 以及Iframe画中画标签
- delphi中比Pos快的函数
- WPF与Direct3D9交互
- Oracle 控制文件(CONTROLFILE)
- Traces of planet collision found 行星相撞陈迹被发
- oracle 的控制结构
- IFrame(画中画,浮动帧标记)
- 第一篇
- 淘宝性能测试要点
- 这种网络我都受不了了
- 浮点数在C/C++中存储方式
- js文字的选中功能
- Lucene3与中文分词
- sql2005的增删改和函数
- js中会用jstl