如何用js控制frame的隐藏或显示的解决办法


Posted in Javascript onMarch 20, 2013

index.htm

<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>frame框架的显示隐藏操作 - 51windows.net</title>
</head>
<frameset name="full" rows="64,*,64">
<frame name="top" scrolling="no" xnoresize target="contents" src="top.htm">
<frameset cols="25%,*" name="cen">
<frame name="contents" target="main" src="left.htm">
<frame name="main" src="main.htm">
</frameset>
<frame name="bottom" scrolling="no" xnoresize target="contents" src="bottom.htm">
<noframes>
<body>
<p>此网页使用了框架,但您的浏览器不支持框架。</p>
</body>
</noframes>
</frameset>
</html>

main.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>main - 51windows.net</title>
</head>
<body>
<SCRIPT LANGUAGE="javascript">
<!--
function shtop(){
if (parent.full.rows.indexOf("0,*,")!=-1){
parent.full.rows="64,*,"+parent.full.rows.split(",")[2]
document.getElementById("shtop").value="隐藏上部";
}
else{
parent.full.rows="0,*,"+parent.full.rows.split(",")[2]
document.getElementById("shtop").value="显示上部";
}
}
function shleft(){
if (parent.cen.cols=="0,*"){
parent.cen.cols="25%,*,"
document.getElementById("shleft").value="隐藏左部";
}
else{
parent.cen.cols="0,*"
document.getElementById("shleft").value="显示左部";
}
}
function shbottom(){
if (parent.full.rows.indexOf(",*,0")!=-1){
parent.full.rows=parent.full.rows.split(",")[0]+",*,64"
document.getElementById("shbottom").value="隐藏下部";
}
else{
parent.full.rows=parent.full.rows.split(",")[0]+",*,0"
document.getElementById("shbottom").value="显示下部";
}
}
function maxmain(){
if (parent.full.rows=="0,*,0"){
parent.full.rows="64,*,64"
parent.cen.cols="25%,*"
document.getElementById("maxmain").value="隐藏左上下";
document.getElementById("shtop").value="隐藏上部";
document.getElementById("shleft").value="隐藏左部";
document.getElementById("shbottom").value="隐藏下部";
}
else{
parent.full.rows="0,*,0";
parent.cen.cols="0,*";
document.getElementById("maxmain").value="显示左上下";
document.getElementById("shtop").value="显示上部";
document.getElementById("shleft").value="显示左部";
document.getElementById("shbottom").value="显示下部";
}
}
//-->
</SCRIPT>
<input type="button" name="maxmain" id="maxmain" onclick="maxmain();" value="隐藏左上下">
<input type="button" name="shtop" id="shtop" onclick="shtop();" value="隐藏上部">
<input type="button" name="shleft" id="shleft" onclick="shleft();" value="隐藏左部">
<input type="button" name="shbottom" id="shbottom" onclick="shbottom();" value="隐藏下部">
</body>
</html>

框架的嵌套:

<html> 
<head> 
</head> 
<body> 
<iframe width=468 height=60 src=abc.aspx></iframe> 
<iframe width=468 height=60 src=cde.aspx></iframe> 
</body> 
</html>

#################################################

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<title>无标题文档</title> 
</head> 
<frameset rows="77,181" cols="*" framespacing="0" border="0"> 
<frame src="abc.aspx"> 
<frame src="cde.aspx"> 
</frameset> 
<noframes><body> 
</body></noframes> 
</html>

//*****************说明************************:
frameset是框架,一个网页被划分成几个块, 每个块为不同的网页文件。iframe是内嵌网页,可以被嵌在一个页页的任何地方。一般iframe使用灵活些。
当使用框架时页面中不应该有body标签。
frameset标签是成对出现的,以<frameset>开始,</frameset>结束,里面用frame。
frameset里面还能嵌入frameset。嵌套框架,框架可以进行多层嵌套。
frameset里面的id,为了方便后面用Javascript来访问这个对象.
如下:

<frameset rows="58,*" frameborder="NO" border="0" framespacing="0">
<frame src="top.htm" name="topFrame" scrolling="NO" noresize ><!--页头-->
<frameset rows="*,20" cols="*" framespacing="0" frameborder="NO" border="0">
<frameset rows="*" cols="120,15,*" framespacing="0" frameborder="NO" border="0" id="leftFrameSet">
<frame src="menu.htm" name="leftFrame" scrolling="NO" noresize><!--菜单-->
<frame src="mid.htm" name="midFrame" scrolling="NO" noresize><!--菜单收缩条-->
<frameset rows="35,*" framespacing="0" frameborder="NO" border="0">
<frame src="navi.htm" name="righttop" scrolling="NO" noresize><!--导航-->
<frameset cols="*,200" framespacing="0" frameborder="NO" border="0">
<frame src="" name="mainFrame">
<frame src="" name="rightFrame" scrolling="NO">
</frameset>
</frameset>
</frameset>
<frame src="bottom.htm" name="bottomFrame" scrolling="NO" noresize><!--页尾-->
</frameset> 
</frameset>

常用框架structure:

HTML语言剖析-frameset <FRAMESET> <FRAME>
<NOFRAMES>
<IFRAME>
■ 框架概念 :
所谓框架便是网页画面分成几个框窗,同时取得多个 URL。只 要 <FRAMESET> <FRAME> 即可,而所有框架标记 要放在一个总起的 html 档,这个档案只记录了该框架 如何划分,不会显示任何资料,所以不必放入 <BODY> 标记,浏览这框架必须读取这档 案而不是其它框窗的档案。<FRAMESET> 是用以划分框窗,每一框窗由一个 <FRAME> 标 记所标示,<FRAME>必须在 <FRAMESET> 范围中使用。如下例:

<frameset cols="50%,*"> 
<frame name="hello" src="/up2u.html"> 
<frame name="hi" src="me2.html"> 
</frameset>

此例中 <FRAMESET> 把画面分成左右两相等部分,左便是显示 up2u.html,右边则会显示 me2.html 这档案,<FRAME> 标记所标示的框窗永远是按由上而下、由左至右的次序。

本节与 Composer 教室的【运用框架】大部分相同,只是本节增加了内容及较为详细,正 如其它篇章一样并不会提及网页制作工具,若馈下学会了 HTML 相信你亦不会选用 Composer , FrontPage 一类的工具了。

■ <FRAMESET> <FRAME> : ▲Top

<FRAMESET> 称框架标记,用以宣告HTML文件为框架模式,并设定视窗如何分割。
<FRAME> 则只是设定某一个框窗内的参数属性。
<FRAMESET> 参数设定:
例子:<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000">

COLS="90,*"
垂直切割画面(如分左右两个画面),接受整数值、百分数, * 则代表占用馀下空 间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以 切成三个视窗,第一个视窗是 30 pixels 的宽度,为一绝对分割,第二个视窗是当 分配完第一及第三个视窗後剩下的空间,第三个视窗则占整个画面的 50% 宽度 为 一相对分割。您可自己调整数字。
ROWS="120,*"
就是横向切割,将画面上下分开,数值设定同上。唯 COLS 与 ROWS 两参数尽量 不要同在一个 <FRAMESET> 标记中,因 Netacape 偶然不能显示这类形的框架,尽 采用多重分割。
frameborder="0"
设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。(避 免使用 yes 或 no )
border="0"
设定框架的边框厚度,以 pixels 为单位。
bordercolor="#008000"
设定框架的边框颜色。
framespacing="5"
表示框架与框架间的保留空白的距离。
<FRAME> 参数设定:
例子:<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">

SRC="a.html"
设定此框窗中要显示的网页档案名称,每个框窗一定要对应著一个网页档案。你可 使用绝对路径或相对路径,有关此两者详见於【连结进阶】。
NAME="top"
设定这个框窗的名称,这样才能指定框架来作连结,必须但任意命名。
frameborder=0
设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。(避 免使用 yes 或 no )
framespacing="6"
表示框架与框架间的保留空白的距离。
bordercolor="#008000"
设定框架的边框颜色。颜色值请参考【HTML 剖析】。
scrolling="Auto"
设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示, AUTO是视情况显示。
noresize
设定不让使用者可以改变这个框框的大小,亦没有设定此参数,使用者可以很随 意地拉动框架,改变其大小。
marginhight=5
表示框架高度部份边缘所保留的空间。
marginwidth=5
表示框架宽度部份边缘所保留的空间。
以下是一些例子:(与 Composer 教室的【运用框架】相同)
例子 HTML Code

<frameset rows="80,*"> 
<frame name="top" src="/a.html"> 
<frame name="bottom" src="/b.html"> 
</frameset>

例子 HTML Code
<frameset rows="80,*,80"> 
<frame name="top" src="/a.html"> 
<frame name="middle" src="/b.html"> 
<frame name="bottom" src="/c.html"> 
</frameset>

例子 HTML Code
<frameset cols="150,*"> 
<frameset rows="80,*"> 
<frame name="upper_left" src="/a.html"> 
<frame name="lower_left" src="/b.html"> 
</frameset> 
<frame name="right" src="/c.html"> 
</frameset>

例子 HTML Code
<frameset rows="80,*"> 
<frame name="top" src="/a.html"> 
<frameset cols="150,*"> 
<frame name="lower_left" src="/b.html"> 
<frame name="lower_right" src="/c.html"> 
</frameset> 
</frameset>

例子 HTML Code
<frameset cols="150,*"> 
<frame name="left" src="/a.html"> 
<frameset rows="80,*"> 
<frame name="upper_right" src="/b.html"> 
<frame name="lower_right" src="/c.html"> 
</frameset> 
</frameset>

■ <NOFRAMES> : ▲Top

当别人使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免 这种情况,可使用 <NOFRAMES> 这个标记,当使用者的浏览器看不到框架时,他就会看 到 <NOFRAMES> 与 </NOFRAMES> 之间的内容,而不是一片空白。这些内容可以是提醒 浏览转用新的浏览器的字句,甚至是一个没有框架的网页或能自动切换至没有框架的版本 亦可。
应用方法:
在<frameset> 标记范围加入 </NOFRAMES> 标记,以下是一个例子:

<frameset rows="80,*"> 
<noframes> 
<body> 
很抱歉,馈下使用的浏览器不支援框架功能,请转用新的浏览器。 
</body> 
</noframes> 
<frame name="top" src="/a.html"> 
<frame name="bottom" src="/b.html"> 
</frameset>

若浏览器支援框架,那堋它不会理会 <noframes> 中的东西,但若浏览器不支援框架,由 於不认识所有框架标记,不明的标记会被略过,标记包围的东西便被解读出来,所以放在 <noframes>范围内的文字会被显示。

■ <IFRAME> : ▲Top

这标记只适用於 IE。 它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是 一个围堵标记,但围著的字句只有在浏览器不支援 iframe 标记时才会显示,如<noframes> 一样,可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 Java Script 会较好,若 javascript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。
<iframe> 的参数设定如下:
例子:

<iframe src="iframe.html" name="test" align="center" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> 
src="iframe.html"

欲显示於此框窗的文件来源除档案名称,必要加上相对或绝对路径。
name="test"
此框窗名称,这是连结标记的 target 参数所 要的,
align="MIDDLE"
可选值为 left, right, top, middle, bottom,作用不大
width="300" height="100"
框窗的宽及长,以 pixels 为单位。
marginwidth="1" marginheight="1"
该插入的文件与框边所保留的空间。
frameborder="1"
使用 1 表示显示边框, 0 则不显示。(可以是 yes 或 no)
scrolling="Yes"
使用 Yes 表示容许卷动(内定), No 则不容许卷动。
例子: 原始码
<center> <iframe src="https://3water.com/" name="test" align="center" width="300" height="100" marginwidth="5" marginheight="5" frameborder="1"> 
很抱歉,馈下使用的浏览器并不支援 IFrame,不能正常浏览我的网页。</iframe>
</center>

显示结果

多数论坛用的左右的frame代码--index.htm如何获得 frame 的 src 的值~~使用JavaScript实现访问本站点任何页面都加载Frame的一种实现方式网页中框架的动态拉动的控制javascript如何操作框架页中的域中图法简表HTML---Frame分栏的javascript代码

Javascript 相关文章推荐
异步加载script的代码
Jan 12 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 #Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 #Javascript
jquery的ajax请求全面了解
Mar 20 #Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 #Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 #Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 #Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 #Javascript
You might like
php修改时间格式的代码
2011/05/29 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
php数组编码转换示例详解
2014/03/11 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
js读写json文件实例代码
2014/10/21 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
golang/python实现归并排序实例代码
2020/08/30 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
应聘美工求职信
2013/11/07 职场文书
个人年底工作总结
2015/03/10 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL