网页Frame框架的各种操作

最新推荐文章于 2024-09-15 17:43:02 发布
转载 最新推荐文章于 2024-09-15 17:43:02 发布 · 1.1k 阅读 · 0
文章标签：

#框架 #menu #table #html #function #javascript

本文详细介绍了使用HTML和JavaScript实现的复杂网页框架设计，包括菜单栏的点击响应、左侧导航栏的显示隐藏功能、定时刷新页面等交互特性，并展示了如何通过JavaScript在不同框架间传递数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

 

a.html :

 

<html>
<head>
<title></title>
<script>
function re_login()
{
   parent.location="relogin.php";
}
window.setTimeout('this.location.reload();',1200000);
</script>
<script language="JavaScript">
function menu_click(menu_id)
{
   parent.leftmenu.document.all.divLeftMenu.innerHTML = "图书分类" + menu_id;
   parent.showhidemenu.leftmenu_open();
   parent.status_bar.document.all.divNowState.innerHTML = "目前点击 图书分类" + menu_id;     
}
</script>
</head>
<body bgcolor="#FF0000">
 <table width="100%">
   <tr>
     <td onclick="menu_click('A');">图书分类A</td>
     <td onclick="menu_click('B');">图书分类B</td>
   </tr>
 </table>
</body>

 

b.html :

 

<html>
<head>
<script>
function GetDataToRight()
{
   parent.rightmain.document.all.divRightMain.innerHTML 
        = document.all.divLeftMenu.innerHTML + " 相关内容 ";   
}
</script>
</head>
<body bgcolor="#FFFF00">
 <table width="100%">
   <tr>
     <td onclick="GetDataToRight()"><div id="divLeftMenu"></div></td>
   </tr>
 </table>
</body>
</html>

 

c.html :

 

<html>
<head>
<title>控制左菜单隐藏或显示</title>
<script language="JavaScript">
var LEFT_MENU_VIEW=0;
function leftmenu_open()
{
   LEFT_MENU_VIEW=0;
   leftmenu_ctrl();
}
function leftmenu_ctrl()
{
   if(LEFT_MENU_VIEW==0)
   {
      parent.frame2.cols="200,8,*";
      LEFT_MENU_VIEW=1;
   }
   else
   {
      parent.frame2.cols="0,8,*";
      LEFT_MENU_VIEW=0;
   }
}
</script>
</head>
<body topmargin="0" leftmargin="0" STYLE="margin:0pt;padding:0pt"  onload="leftmenu_ctrl()" bgcolor="#0000FF">
 <TABLE cellspacing="0" width="100%" height="100%" cellpadding="0" align="center" class="col">
   <TR>
     <TD>
       <TABLE cellspacing="0" width="100%" height="50" bgcolor="#EEEEEE" border="1" >
         <TR onclick="leftmenu_ctrl()">
           <TD style="cursor:hand;">
           </TD>
           </TR>
         </TABLE>
     </TD>
   </TR>
 </TABLE>
</body>
</html>

 

d.html :

 

<html>
<head>
<script Language=JavaScript>
var flag=1;
function showhideTop()
{
   if(flag==1)
   {
         parent.parent.parent.frame1.rows="0,*,50";
         document.all.tdShowTop.innerText = "显示上方";
    }
    else
    {
    parent.parent.parent.frame1.rows="70,*,50";
    document.all.tdShowTop.innerText = "隐藏上方";
    }

    flag=1-flag;
}

</script>
</head>

<body bgcolor="#00FF00">
 <table width="100%">
   <tr height="10">
     <td align="right" id="tdShowTop" onclick="showhideTop();" >
        隐藏上方
     </td>
   </tr>
   <tr>
     <td><div id="divRightMain"></div></td>
   </tr>
 </table>
</body>
</html>

 

e.html :

 

<html>
<body>
 <table width="100%">
   <tr>
     <td><div id="divNowState"></div></td>
     <td></td>
   </tr>
 </table>
</body>
</html>

 

frames.htm :

 

<html>
<head>
<title>frames</title>
</head>
<frameset rows="70,*,50"  cols="*" frameborder="NO" border="0" framespacing="0" id="frame1">
    <frame name="banner" scrolling="no" noresize src="a.htm" frameborder="0">
    <frameset rows="*"  cols="200,10,*" frameborder="NO" border="0" framespacing="0" id="frame2">
       <frame name="leftmenu" scrolling="auto" noresize src="b.htm" frameborder="0">
       <frame name="showhidemenu" scrolling="no" noresize src="c.htm" frameborder="0">
       <frame name="rightmain" scrolling="auto" src="d.htm" frameborder="0">
    </frameset>
    <frame name="status_bar" scrolling="no" noresize src="e.htm" frameborder="0">
</frameset>
</html>
HTML框架结构——【frameset、frame、iframe】
我的的博客哦
05-09 4907
🏷️语法格式：
frame页面框架示例
03-02
frame页面框架示例，分上、左、下三块，左侧只有单一示例菜单。
技术分享 | 网页 frame 与多窗口处理
ceshiren_com的博客
05-12 1104
本文节选自霍格沃兹测试开发学社内部教材 要定位一个元素时，怎么都定位不到的时候就要考虑是不是浏览器内嵌了一个 frame 窗口或者要找的元素在新打开的窗口里。这时候就需要进行 frame 的切换或者窗口的切换。 frame 类似于在原有主 HTML 的基础上又嵌套一个 HTML，而且嵌套的 HTML 是独立使用的，互不影响。 当打开一个页面时，光标的定位是在主页面中，如果页面是由多个 frame 组成的，那么无法直接定位到具体的元素，需要切换到自己所需要的 frame 中，再查找该元素.
网页框架frame
浪客川
07-06 1149
网页框架 frameset 效果展示 代码截图 核心代码 案例代码 第一章 效果展示 第二章 代码截图 第三章 核心代码 第四章 案例代码 01、首页代码 <!DOCTYPE html> <html> <frameset cols="15%,*"> <frame src="侧边栏.html" name="left"></frame> <frame src
frame 网页框架
nywsp的专栏
03-20 802
frameset 要放在head部分中。。否则不显示。。。 cols是宽度。。rows是高度 //framespacing 为间距 iframe为浮动框架，，，可以制作一些小块的东西 框架的综合 index.jsp le.jsp left.html right.html top.html
关于iframe嵌套页面用法
weixin_43507682的博客
11-21 2125
1.在HTML中写入iframe标签 <iframe name="my-iframe" id="my-iframe" src="初始显示的页面或者图片" frameborder="边框（一般为0）" width="宽" height="高" scrolling="是否滚动（一般为“no”）"></iframe> 2.在HTML中写入a标签，当点击a标签时，子页面跳转到所需的...
html 网页frame,初学：详细讲解网页框架frameset的使用_html
weixin_28916817的博客
06-19 741
最近在搞网页编程，总结了frameset 的一些使用技巧，供大家参考哦，还是先剖析一下框架吧！■ 框架标记 欲明白本篇【html彻底剖析】之标记分类，请看 【标记一览】。也请先明白围堵标记与空标记的分别，请看 【HTML概念】。■ 框架概念 ：谓框架便是网页画面分成几个框窗，同时取得多个 URL。只需要 即可，面所有框架标记需要放在一个总起的 html 档，这个档案只记录了该框架如何分割 ，不...
写 游戏后台管理系统时 碰到的问题 导航页面怎么编写的问题
boshuzhang的专栏
08-21 1109
在浏览网页时，我们经常会看到一个导航条，当点击导航条上的项目时，相应网页会在显示区域变换显示。首先准备一个主界面文件main.htm，将其划分成两块区域index和content.     其中index区域链接index.htm文件，主要是一些链接项目；content区域负责显示相应链接文件，初始显示链接为frame_a.htm. name="i
一个简单的网页框架 frame
08-02
一个简单的网页框架,用于学习Frame 源码如下： <html> <head> <script language='javascript'> if(window.opener==null) { window.opener=null; window.close(); window.open('index.html','','toolbar=no,menubar=no,location=no,status=no,width=' + screen.width + ',height=' + screen.height + ',left=0,top=0'); } </script> <meta name= "robots " content= "noindex "> <meta content= "text/html;charset=gb2312 " http-equiv= "content-type "> <title> Welcome To RptSystem </title> </head> <frameset name="fsthead" rows="91,*,35", frameborder="0" framespacing="0" bordercolor="#3366cc"> <noframes > 请使用支持 frame 的浏览器或者访问 <a href= "/Tree/SiteMap.htm " target= "_blank "> CSDN 社区地图 </a> </noframes> <frame name= "headframe" marginheight= "0 " src= "http://communitysss.csdnss.netss" scrolling="NO" /> <frameset name= "bodyframe" cols= "260,* " framespacing= "0 " frameborder= "0 " > <frame name= " " src= "/logo/logo.aspx " marginheight= "0 " /> <frame name= " " src= "/Tree/tree.htm " marginheight= "0 " /> </frameset> <frame name= "footframe" marginheight= "0" src="foot2.html" scrolling="NO" noresize> </frame> </frameset> </html>
Html-----页面框架
chenyun1997的博客
08-20 1394
作用：通过使用框架，可以在一个浏览窗口中显示多个页面（信息管理系统） frameset标签： 框架结构标签，使用时需要将body标签去掉，用frameset来代替body。 rows定义行显示百分比 cols定义列显示百分比...
快速学习网页框架FRAME
mikebibby的专栏
07-31 1531
FRAME（框架）是Web上经常会看到的页面结构。使用可视Web开发工具（比如Dreamweaver或者Frontpage），虽然可以在 WYSIWYG环境中通过简单的鼠标托拽完成FRAME的构建，但是要实现真正细致甚至强大的功能，仔细理解FRAME的代码结构至关重要！你将发现， FRAME原来是这样的亲切易用。　　创建基本的FRAMESET　　FRAMESET页面与普遍的Web页面有些不
html 中的frame使用说明及实例
04-19
讲解html中的frame的使用，还有实例。辛辛苦苦搜集的。
小项目：httpserver + WebFrame(网页框架)
白走刀口的博客
11-07 939
httpserver V3.0 第三版！！！ httpserver + WebFrame(网页框架) # coding = utf-8 ''' httpserver V3.0 第三版！！！ httpserver + WebFrame(网页框架) ''' from socket import * import sys from threading import Thread from settin...
（七） web自动化测试-网页frame与多窗口处理
gzytester的博客
05-30 1260
（七） web自动化测试-网页frame与多窗口处理 文章目录（七） web自动化测试-网页frame与多窗口处理前言一、目录11. 子目录1二、目录21. 子目录2总结 前言 提示：这里可以添加本文要记录的大概内容： 一、目录1 1. 子目录1 二、目录2 1. 子目录2 总结 提示：这里对文章进行总结： ...
Python+Selenium向iframe富文本框输入内容
测试-八戒
04-25 1154
在使用Selenium测试一些CMS后台系统时，有时会遇到一些富文本框，如下图所示：整个富文本编辑器是通过iframe嵌入到网页中的，手动尝试输入内容，发现内容是输入到iframe页面的body中的，我们也可以直接在body的源码上点击右键选择Edit HTML,输入相应的html代码，达到向富文本框输入的目的，如下下图：以下是使用Selenium的操作方法。
frame框架设计网页
11-29 1683
如何用框架设计网页 如图 首先设计一个两列的框架结构的网页 Frame.html 框架的结构 在leftFrame框架中放入一个网页Left.html 公司目录 body{ font-family:Arial; font
0.web框架介绍
清风
03-01 956
1. web应用概念 1.1 web应用 web --> 万维网简称. web应用:通过web访问的程序. 能实现前后端的数据交互。 1.2 web开发架构 web软件开发架构: 1. C/S 架构 client 客户端 server 服务端 2. B/S 架构 browser 浏览器 server 服务端 B/S的本质也是C/S,浏览器充当客户端. 服务器需要具备的特征: 24小时对外提供服务. 1.3 web框架的优/缺点 优点: 1.只需要一个浏览器,不需要安装客户端.
窗口框架frame(HTML前端)
最新发布
qq_74861982的博客
09-15 2126
我们要在另一个网页中显示，此时我们就要设置默认打开的网页，也就是a标签的target属性，记得先对要显示的网页设置一个name,方便指定网页打开。4.此时找到frame.html在浏览器中预览效果如下，我们可以看到，一个网页分为左中右三个小的网页了，并且三个小的网页显示的东西不同。作用：将网页分割为多个HTML页面，即将窗口分为多个小窗口，每个小窗口可以显示不同的页面，但是在浏览器中是一个完整的页面。然后我们在左边那个网页插入两个超链接，一个是个人简历，一个是兴趣爱好。点击我的兴趣爱好，将出现如何内容。
折叠菜单--实现左边目录，右边显示
weixin_30729609的博客
12-26 804
用iframe标签 1.先有一个显示界面，用iframe分别显示左右的界面 <%-- Created by IntelliJ IDEA. User: Skye Date: 2017/12/26 Time: 9:21 To change this template use File | Settings | File Templates. --%>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值