HTML 框架 frameset,frame
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架
- 框架结构标签(<frameset>)
-
- 框架结构标签(<frameset>)定义如何将窗口分割为框架
- 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
框架标签(frame)
frame标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中:
<frameset cols="25%,75%">
< frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
JavaScript中window的对象集合:frames[];
返回窗口中所有命名的框架。
该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意,frames[] 数组中引用的框架可能还包括框架,它们自己也具有 frames[] 数组。
window对象的一个属性 top;
top 属性返回最顶层的先辈窗口。
该属性返回对一个顶级窗口的只读引用。如果窗口本身就是一个顶级窗口,top 属性存放对窗口自身的引用。如果窗口是一个框架,那么 top 属性引用包含框架的顶层窗口。
语法:window.top
基本的注意事项 - 有用的提示:
假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize="noresize"。
为不支持框架的浏览器添加 <noframes> 标签。
重要提示:不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。
本例演示如何制作含有三份文档的框架结构,同时将他们混合置于行和列之中。
混合框架:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="25%,*">//这个的*号相当于1-25%
<frame src="frame1.html"> <frameset cols="15%,*">
<frame src="frame2.html">
<frame src="frame3.html" name="frame3">
</frameset>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>frame2</h1>
<a href="jg22.html" target="frame3" >jg22</a><br/><br/><br/>
<a href="jg23.html" target="frame3">jg23</a><br/><br/><br/>
<a href="jg24.html" target="frame3">jg24</a><br/><br/><br/>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var bnt=document.getElementsByTagName('button')[0];
var bnt1=document.getElementsByTagName('button')[1];
var bnt2=document.getElementsByTagName('button')[2];
bnt.onclick=function(){
window.top.frames[2].history.go(-1);//previous
};
bnt1.onclick=function(){
window.top.frames[2].history.go(1);//next
};
bnt2.onclick=function(){
window.location.href="change.html";//只改变浏览器窗口中frame1的页面
window.top.location.href="change.html";//改变整个浏览器窗口页面
}
}
</script>
</head>
<body>
<h1>frame1</h1>
<button>previous</button>
<button>next</button>
<button>change</button> </body>
</html>
截图:
HTML 框架 frameset,frame的更多相关文章
- thinkphp 加载静态框架frameset frame 浏览器显示空白
我觉得静态框架这个东西非常奇怪,可能是因为没有研究透它. 我的情况是这样的,我之前做过的一个面向对象没有基于thinkPHP,的项目中用同一套后台静态框架没有问题,但用thinkphp后台的index ...
- html中的框架frameset和frame及iframe
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面,简而言之,就是在一个窗口中显示多个页面. 每个页面称之为一个框架.并且每个框架独立 ...
- 列表框、分组列表框、标签(label)、分组框(fieldset)、框架(frameset)
列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value= ...
- iframe/frameset/frame的区别
目录 iframe iframe属性的用法 iframe属性的取值 iframe的书写格式 frameset frameset的用法(框架模板) frameset属性的属性值 frame frame的 ...
- 框架frameset
转自: http://www.cnblogs.com/sunfeiwto/archive////.html <FRAMESET> <FRAME> <NOFRAMES> ...
- jsp中frameset frame不显示页面
今天玩frameset 的时候,无论我怎么改,页面死活不显示出来,网上找了很多答案,各种复制都不行,后来终于找到答案了,在使用frameset 的时候,不能将frameset 的内容放在body标签里 ...
- <frameset><frame><iframe>网页框架
这几个标签都属于同一类功能,就是框架内镶功能: 1)<frameset>意为把页面分解成一定部分,让每一部分显示不同的内镶框架,如(请复制到DW尝试): <html> < ...
- frameset,frame应用,常用于后台
<!DOCTYPE HTML><html><head><title>lin3615</title></head><fram ...
- web 浏览器窗口window 与框架 frameset 的关系
如果页面包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中,可以通过数字索引(从0开始,从左右到右,从上到下)或者框架名称来访问相对应的window对象. 每个window ...
随机推荐
- 第一次Java实验
模仿JavaAppArguments.java实例,编写一个程序,此程序从命令行接受多个数字,求和之后输出. 1.设计思路:命令行参数都是字符串,必须将其转化成数字才能相加,定义一个数组接收字符串 ...
- Codeforces820A Mister B and Book Reading 2017-06-28 09:38 67人阅读 评论(0) 收藏
A. Mister B and Book Reading time limit per test 2 seconds memory limit per test 256 megabytes input ...
- QOpenGLFunctions的相关的使用(1)
QOpenGLFunctions的使用 1. QOpenGLFunctions 说明 QOpenGLFunctions 类提供了跨平台的OpenGl ES2.0 API版本. OpenGL 2. ...
- linux中的amount的解释
挂载(amount)概念简述: 根文件系统之外的其他文件要想能够被访问,都必须通过“关联”至根文件系统上的某个目录来实现,此关联操作即为“挂载”,此目录即为“挂载点”,解除此关联关系的过程称之为“卸载 ...
- list列表常用操作
1.创建列表.只要把逗号分隔的不同的数据项使用方括号括起来即可 List = ['wade','james','bosh','haslem'] 2.使用 range() 创建数字列表 numbers ...
- 微信内置浏览器私有接口WeixinJSBridge介绍
原文地址:http://www.3lian.com/edu/2015/05-25/216227.html 这篇文章主要介绍了微信内置浏览器私有接口WeixinJSBridge介绍,本文讲解了发送给好友 ...
- 通过JS拦截 pushState 和 replaceState 事件
history.pushState 和 history.replaceState 可以在不刷新当前页面的情况下更改URL,但是这样就无法获取通过AJAX得到的新页面的内容了.虽然各种HTML5文档说 ...
- 将Azure计算机视觉添加到Xamarin应用程序简单体验
微软Azure提供了大量的AI及机器学习功能,可以通过简单的RestAPI调用. 关于此文中提到的Azure计算机视觉,可查看此链接的详细介绍. 通过微软的服务,只需要几行代码即可使用计算机视觉中的 ...
- 【转】TOP10美国虚拟主机/网站空间推荐
原文:http://www.laozuo.org 不同的站长用户需要不同的主机产品,并不是所有的站长, 所有的网站都想放置在VPS服务器中的.虚拟主机也有虚拟主机的方便和优势,下面为老左精选的10个比 ...
- 异步三部曲之promise
概述 这是我看你不知道的JavaScript(中卷)的读书笔记,供以后开发时参考,相信对其他人也有用. 例子 首先来看一个例子,如果我们要异步获取x和y,然后把他们打印出来,那么用回调可以编写代码如下 ...