一: <Frameset>为框架标记,说明该网页文档为框架组成,并设定文档中组成框架集的框架的布局,用来划分框架,每一个框架由<Frame></Frame>标记。
<Frame>用以设置组成框架集中各个框架的属性。<Frame></Frame>必须在<Frameset></Frameset>之内使用。比如:
<FRAMESET border=1 frameSpacing=1borderColor=#47478d rows=* cols=180,*>
<FRAME src="inc/admin_left.htm"name=left scrolling=no id="left">
<FRAME src="inc/admin_center.htm"name=main scrolling="no">
</FRAMESET>
在这个例子当中,<Frameset></Frameset>把页面分为左右两个部分,左侧框架中的页面是admin_left.htm,右侧框架中的页面是admin_center.htm。
注意:<Frame></Frame>标记的框架顺序为从左至右或从上到下。
二: Iframe是Inline Frame的缩写,称为内联框架,它和frame如同兄弟。frame是帧标记,Iframe叫浮动帧标记,它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示,而是可以直接嵌入在一个HTML文件中,与这个HTML文件内容相互融合,成为一个整体;因为它可以多次在一个页面内显示同一内容,而不必重复写内容,所以人们形象称这种效果为“画中画”。 Iframe标记使用格式,比如:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]"frameborder="x"name= "main"></iframe>
在这个例子中,各个含义是:
src: 文件的路径,既可是HTML文件,也可以是文本、ASP等;
width、height:“内部框架”区域的宽与高;
scrolling:当SRC的指定的HTML文件在指定的区域内显示不完时的滚动选项,如果设置为NO,则不出现滚动条;如为Auto:则自动出现滚动条;如为Yes,则显示滚动条。
FrameBorder:区域边框的宽度,只有0和1两个值,分别表示没有边框和有边框,为了让“内部框架”与邻近的内容相融合,常设置为0。
name:框架的名字,用来进行识别。
三: 下面是我写通讯录时用到的iframe知识点,我抽取了出来,用两组父子页面展示给大家:[分两组页面,分别是在父子页面中操作]
1.child1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function c(){
alert(document.getElementById("childTextId").value);
}
</script>
</head>
<body>
<form action="">
<input type="text" value="child text" id="childTextId" name="childTextName">
<input type="text" id="childTextId2" name="childTextName2">
<input type="text" id="childTextId3" name="childTextName3">
</form>
</body>
</html>
parent1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function p(){
//在父页面中,取得子页面的内容赋给父页面[方式一]
document.getElementById('parentTextId1').value=window.frames["iframeName"].document.all('childTextName').value;
//在父页面中,取得子页面的内容赋给父页面[方式二]
document.getElementById('parentTextId2').value=iframeName.document.getElementById("childTextId").value;
}
function p2(){
//在父页面中,调用iframe子页面的JS函数
iframeName.window.c();
}
function p3(){
//在父页面中,取得本页面的内容赋给子页面[方式一]
window.frames["iframeName"].document.all('childTextName2').value=document.getElementById('parentTextId1').value;
//在父页面中,取得本页面的内容赋给子页面[方式二]
iframeName.document.getElementById("childTextId3").value=document.getElementById('parentTextId2').value;
}
</script>
</head>
<body>
<form action="">
<input type="text" id="parentTextId1">
<input type="text" id="parentTextId2">
<input type="button" onclick="p();" value="p">
<input type="button" onclick="p2();" value="p2">
<input type="button" onclick="p3();" value="p3">
</form>
<iframe src="c.html" name="iframeName"></iframe>
</body>
</html>
2.child2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function c1(){
//在子页面中,取得本页面的内容赋给父页面
parent.document.getElementById("t").innerHTML=document.getElementById('childTextId').value;
}
function c2(){
//在子页面中,调用iframe父页面的JS函数
window.parent.showTextarea();
}
</script>
</head>
<body>
<form action="">
<input type="text" id="childTextId" name="childTextName" value="childText">
<input type="button" onclick="c1();" value="c1">
<input type="button" onclick="c2();" value="c2">
</form>
</body>
</html>
parent2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function showTextarea(){
alert(document.getElementById("t").value);
}
</script>
</head>
<body>
<textarea rows="0" cols="0" id="t"></textarea>
<iframe src="c2.html" name="iframeName"></iframe>
</body>
</html>
分享到:
相关推荐
里面包含了frameset,frame以及iframe的一些技术的演练,希望对大家有帮助,如果有什么补充或疑问,可以加QQ374053115进行和我讨论交流,互相进步!里面代码均手写,大致功能都已经实现,如果错误欢迎指出!
JS 操作 Frameset、Frame、Iframe 对象可以实现框架之间的互相访问和控制。 Frameset 对象 Frameset 对象是 HTML 中的框架集,它可以包含多个 Frame 对象。Frameset 对象可以通过 `window.frames` 属性来访问,...
frame,iframe.frameset用法和区别
frame,iframe,frameset用法和区别
页面布局frameset frame
对frameset、frame、iframe的js操作.pdf
本文档适合web开发初级者阅读,讲述了常用的frame,iframe,frameset区别和用法,如果你对这些都还不是很清楚,阅读本文档可能对你有用
frame frameset左右收缩 iframe左右收缩
JSP框架类frameset和frame的区别和用法 JSP框架类frameset和frame是Web开发中常用的技术,用于构建复杂的网页布局。下面将详细介绍frameset和frame的区别和用法。 frameset frameset标签用于声明页面使用框架技术...
HTML框架演示 frameset和frame综合应用 左右、下上结构
10.4.1 Frameset与Frame的区别首先讲解Frameset与Frame之间的区别。 <Frameset></Frameset>用来划分框架,每一个框架由<Frame></Frame>标记。<Frame></Frame>必须在<...
父框架到子框架的引用、子框架到父框架的引用、兄弟框架间的引用、不同层次框架间的互相引用具体实现如下,有此需求的朋友可以参考下
多个iframe,显示其中一个frame中的div,并处于最上层显示 并且页面中的填写的值,可以传到弹出的div页面中 最近一段时间在做这个东西,给大家分享一下 附带测试代码 js弹出div层
页面框架内嵌示例,通过IFRAME与FRAMESET内嵌后不会出现滚动条的问题,以及top跳出框架的问题
测试IE6/火狐/google浏览器通过 注意:一定要按顺序摆放属性。否则会出现意外情况!
简单说明frame 及frameset标签中的各个属性,以及各个属性的作用。
frame与frame之间如何用JavaScript传值
Frameset小例子,就是html里面框架的运用