首页
所有分类
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 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
js密码强度检测
Jan 07 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 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) Spring Bean(1) openEuler(1) Spring JPA(1) 慢日志(1) EditText(1) cmd(1) exists(2) REST(1) Switch(1)
You might like
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
PHP解析RSS的方法
2015/03/05 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
一个javascript参数的小问题
2008/03/02 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python常用算法学习基础教程
2017/04/13 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
利用纯CSS3实现文字向右循环闪过效果实例（可用于移动端）
2017/06/15 HTML / CSS
德国街头和运动文化高品质商店：BSTN Store
2017/08/26 全球购物
C#里面如何倒序排列一个数组的元素？
2013/06/21 面试题
毕业学生推荐信
2013/12/01 职场文书
2014植树节活动总结
2014/03/11 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
zabbix监控mysql的实例方法
2021/06/02 MySQL
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers