通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份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的更多相关文章

  1. thinkphp 加载静态框架frameset frame 浏览器显示空白

    我觉得静态框架这个东西非常奇怪,可能是因为没有研究透它. 我的情况是这样的,我之前做过的一个面向对象没有基于thinkPHP,的项目中用同一套后台静态框架没有问题,但用thinkphp后台的index ...

  2. html中的框架frameset和frame及iframe

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面,简而言之,就是在一个窗口中显示多个页面. 每个页面称之为一个框架.并且每个框架独立 ...

  3. 列表框、分组列表框、标签（label）、分组框（fieldset）、框架(frameset)

    列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value= ...

  4. iframe/frameset/frame的区别

    目录 iframe iframe属性的用法 iframe属性的取值 iframe的书写格式 frameset frameset的用法(框架模板) frameset属性的属性值 frame frame的 ...

  5. 框架frameset

    转自: http://www.cnblogs.com/sunfeiwto/archive////.html <FRAMESET> <FRAME> <NOFRAMES> ...

  6. jsp中frameset frame不显示页面

    今天玩frameset 的时候,无论我怎么改,页面死活不显示出来,网上找了很多答案,各种复制都不行,后来终于找到答案了,在使用frameset 的时候,不能将frameset 的内容放在body标签里 ...

  7. <frameset><frame><iframe>网页框架

    这几个标签都属于同一类功能,就是框架内镶功能: 1)<frameset>意为把页面分解成一定部分,让每一部分显示不同的内镶框架,如(请复制到DW尝试): <html> < ...

  8. frameset,frame应用，常用于后台

    <!DOCTYPE HTML><html><head><title>lin3615</title></head><fram ...

  9. web 浏览器窗口window 与框架 frameset 的关系

    如果页面包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中,可以通过数字索引(从0开始,从左右到右,从上到下)或者框架名称来访问相对应的window对象. 每个window ...

随机推荐

  1. android 增量更新原理

    原理如下:服务器端设计增量表,记录数据操作顺序id,和增删改查信息.在进行数据库表操作的时候同时进行将信息保存在增量表. android客户端在请求的时候上传最后保存的id.服务端判断最后的id,返回 ...

  2. Python 7步机器学习

    http://python.jobbole.com/84108/ 由于我们要使用机器学习和科学计算的 packages ,这里建议安装  Anaconda.Anaconda 是一个可在 Linux , ...

  3. hdu 1698 Just a Hook 【线段树+lazy】

    题目 写了一天的线段树,这道题主要说明一下sum是赋值的,不是累加的,并且在push_down的时候lazy也是赋值的.因可能对懒标记的理解还不是很透彻吧. #include <iostream ...

  4. Android Studio-引用jar及so文件

    一.引用jar文件    1.将jar文件复制.粘贴到app的libs目录中:    2.右键点击jar文件,并点击弹出菜单中的“Add As Library”,将jar文件作为类库添加到项目中:  ...

  5. Sql Server中的表访问方式Table Scan, Index Scan, Index Seek

    1.oracle中的表访问方式 在oracle中有表访问方式的说法,访问表中的数据主要通过三种方式进行访问: 全表扫描(full table scan),直接访问数据页,查找满足条件的数据 通过row ...

  6. ASP.NET SignalR Troubeshooting

    method could not be resolved 场景: Javascript客户端不生成代理,调用服务端方法. 按照官网文档的用法: contosoChatHubProxy.invoke(' ...

  7. 记录一次BUG修复-Entity Framwork SaveChanges()失效

    目录 一. 前言 二.问题背景 三.问题描述 四.问题解决步骤 六.总结 一. 前言 这是笔者在参与一个小型项目开发时所遇到的一个BUG,因为项目经验不足对Entity Framwork框架认识不足导 ...

  8. BZOJ 5281--[Usaco2018 Open]Talent Show（分数规划&单调队列&DP）

    5281: [Usaco2018 Open]Talent Show Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 79  Solved: 58[Sub ...

  9. Codeforces Round #425 (Div. 2) B. Petya and Exam(字符串模拟 水)

    题目链接:http://codeforces.com/contest/832/problem/B B. Petya and Exam time limit per test 2 seconds mem ...

  10. spring cloud学习(二) 调用服务

    spring-cloud调用服务有两种方式,一种是Ribbon+RestTemplate, 另外一种是Feign. Ribbon是一个基于HTTP和TCP客户端的负载均衡器,其实feign也使用了ri ...