zoukankan      html  css  js  c++  java
  • frame隐藏显示

    下面是主要代码:

    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="http://www.pcedu.com.cn/index.html" 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代码

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/RainyLin/archive/2007/08/08/1731761.aspx

  • 相关阅读:
    Codeforces 1265A Beautiful String
    1039 Course List for Student (25)
    1038 Recover the Smallest Number (30)
    1037 Magic Coupon (25)
    1024 Palindromic Number (25)
    1051 Pop Sequence (25)
    1019 General Palindromic Number (20)
    1031 Hello World for U (20)
    1012 The Best Rank (25)
    1011 World Cup Betting (20)
  • 原文地址:https://www.cnblogs.com/chinafine/p/1749456.html
Copyright © 2011-2022 走看看