您现在的位置:首页 >> 前端 >> 内容

框架frameset和iframe

时间:2013/9/25 15:54:42 点击:

  核心提示:所谓框架便是网页画面分成几个框窗,同时取得多个 URL。只需要 FRAMESET FRAME 即可,而所有框架标记需要放在一个总起的 html 档,这个档案只记录了该框架 如何划分,不会显示任何资料,...
所谓框架便是网页画面分成几个框窗,同时取得多个 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> 标记所标示的框窗永远是按由上而下、由左至右的次序。

 

          当别人使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免 这种情况,可使用 <NOFRAMES> 

               这个标记,当使用者的浏览器看不到框架时,他就会看 到 <NOFRAMES> 与 </NOFRAMES> 

               之间的内容,而不是一片空白。这些内容可以是提醒 浏览转用新的浏览器的字句,甚至是一个没有框架的网页或能自动切   

 

  换至没有框架的版本 亦可。 

 

 

[html]  

 <html>  

  <frameset rows="80,*,20">  

   <noframes>  

       <body>  

          很抱歉,阁下使用的浏览器不支援框架功能,请转用新的浏览器。  

       </body>  

    </noframes>   

      <frame name="top" src="a.html">  

         <frameset cols="150,*">  

           <frame name="lower_left" src="b.html">  

           <frame name="lower_right" src="c.html">  

        </frameset>  

      <frame name="foot" src="d.html">  

  </frameset>    

</html>  

 

这标记只适用於 IE。 它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是 一个围堵标记,但围着的字句只有在浏览器不支援

               iframe 标记时才会显示,如<noframes> 一样,可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 Java

               Script 会较好,若 javascript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。 

               <iframe> 的参数设定如下: 

               例子: <iframe src="iframe.html" name="test" align="MIDDLE" 

               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 则不容许卷动。

 

在使用框架时跳转问题的解决方法:在iframe、frameset 中有name属性,在跳转时<a href="chap1.html" target="lower_left">Chapter 

 

1</a>,target可以指定要跳转目标 <frame name="lower_left" src="b.html">中去。

 

例子:frameset,当然在ifame中同样可以用name去跳转

 

    intdex.html

 

[html]  

 <html>  

  <frameset rows="80,*,20">  

   <noframes>  

       <body>  

          很抱歉,阁下使用的浏览器不支援框架功能,请转用新的浏览器。  

       </body>  

    </noframes>   

      <frame name="top" src="a.html">  

         <frameset cols="150,*">  

           <frame name="lower_left" src="b.html">  

           <frame name="lower_right" src="c.html">  

        </frameset>  

      <frame name="foot" src="d.html">  

  </frameset>    

</html>  

 a.html

 

 

[html]  

<html>  

<body>  

<ul>  

  <li><a href="pref.html" target="lower_left">Preface</a></li>  

  <li><a href="chap1.html" target="lower_left">Chapter 1</a></li>  

  <li><a href="chap2.html" target="lower_left">Chapter 2</a></li>  

  <li><a href="chap3.html" target="lower_left">Chapter 3</a></li>  

</ul>  

</body>  

</html>  

chap1.html

[html]  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">  

<html>  

 <head>  

  <title> New Document </title>  

  <meta name="Generator" content="EditPlus">  

  <meta name="Author" content="">  

  <meta name="Keywords" content="">  

  <meta name="Description" content="">  

 </head>  

  

 <body>  

  <ul>  

  <li><a href="pref.html" target="lower_left">Preface</a></li>  

  <li><a href="chap1.html" target="lower_right">Chapter 1</a></li>  

  <li><a href="chap2.html" target="lower_right">Chapter 2</a></li>  

  <li><a href="chap3.html" target="lower_left">Chapter 3</a></li>  

</ul>  

 </body>  

</html>  

 

chap2.html

 

[html] 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">  

<html>  

 <head>  

  <title> New Document </title>  

  <meta name="Generator" content="EditPlus">  

  <meta name="Author" content="">  

  <meta name="Keywords" content="">  

  <meta name="Description" content="">  

 </head>  

  

 <body>  

   <li><a href="pref.html" target="lower_left">Preface</a></li>  

  <li><a href="chap1.html" target="lower_right">Chapter 1</a></li>  

  <li><a href="chap2.html" target="lower_right">Chapter 2</a></li>  

  <li><a href="chap3.html" target="lower_left">Chapter 3</a></li>  

 </body>  

</html>  

 

Tags:框架 架F FR RA 
作者:网络 来源:不详