首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

如何用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代码

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
js调用css属性写法
Sep 21 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
javascript中如何判断类型汇总
May 14 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
Javascript文本框脚本实现方法解析
Oct 30 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
代理(2) 匹配文本(1) 选择器(1) GNN(1) 追加文本(1) 图片模糊(1) flex-shrink(1) SQL注入(2) flex(1) canvas(2)
You might like
深思 PHP 数组遍历的差异（array_diff 的实现）
2008/03/23 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
canvas时钟效果
2017/02/16 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python定位xpath 节点位置的方法
2019/08/27 Python
Python创建自己的加密货币的示例
2021/03/01 Python
一款CSS3实现多功能下拉菜单（带分享按）的教程
2014/11/05 HTML / CSS
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
伦敦的高级牛仔布专家：Trilogy
2018/08/06 全球购物
Volcom英国官方商店：美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
送货司机岗位职责
2013/12/11 职场文书
给学校的建议书
2014/03/12 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
小组组名及励志口号
2015/12/24 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
ant design charts 获取后端接口数据展示
2022/05/25 Javascript