Post
Ask Question

Understanding Frames

Frames

 
Frames allow you to divide the page into several rectangular areas and to display a separate document in each rectangle. Each of those rectangles is called a "frame".
 
Here is an example
  1. <FRAMESET ROWS="75%, *" COLS="*, 40%">    
  2.   <FRAME SRC="framea.html">    
  3.   <FRAME SRC="frameb.html">    
  4.   <FRAME SRC="framec.html">    
  5.   <FRAME SRC="framed.html">    
  6.   <NOFRAMES>    
  7.   <H1>No Frames? No Problem!</H1>    
  8.   Take a look at our    
  9.   <A HREF="noframes.html">no-frames</A>    
  10.   version.    
  11.   </NOFRAMES>     
  12. </FRAMESET> 
    1. <FRAMESET ...> is used instead of the <BODY ...> tag. The frameset file has no content which appears on the page, so it has no need for <BODY ...>, which designates the content of the page. In fact, if you use <BODY ...> (except inside <NOFRAMES>), the frames will not appear. Tags in <HEAD>, including <TITLE>, still have their intended effects.
       
    2. Rows and columns are described by a list of widths or heights. For example COLS="25%, *, 40%" says that there will be three columns. The first column takes up 25% of the width of the page, the third column takes up 40% of the width of the page, and the asterisk ("*") means "whatever is left over". See COLS and ROWS for more details.

    Nested Frames

    1. <FRAMESET ROWS="15%,*">    
    2.    <FRAME SRC="titlebar.html" NAME=TITLE SCROLLING=NO>    
    3.    <FRAMESET COLS="20%,*">    
    4.       <FRAME SRC="sidebar.html" NAME=SIDEBAR>    
    5.       <FRAME SRC="menu.html" NAME=RECIPES>    
    6.    </FRAMESET>     
    7.    <NOFRAMES>    
    8.       No frames? No Problem! Take a look at our     
    9.    <A HREF="menu.html">no-frames</A> version.    
    10.    </NOFRAMES>     
    11. </FRAMESET> 
      Targeting Frames  Each frame is given a name using <FRAME NAME="...">. These names uniquely identify each frame. Using these names, links in other frames can tell the browser which frames the link targets.
      1. <FRAMESET COLS="20%,*">    
      2.       <FRAME SRC="sidebar.html" NAME=SIDEBAR>    
      3.       <FRAME SRC="main.html" NAME=MAIN>    
      4. </FRAMESET>   
      To target one of these frames, the link should have a TARGET attribute set to the name of the frame where the linked page should appear. So, for example, this code creates a link to tfetacos.html and targets that link to the MAIN frame:
       
      <A HREF="tfetacos.html" TARGET=MAIN>my link</A>
       
      Targeting the whole window
       
      Eventually, in a framed site, you want to "break out"... link to a page and have that page take over the entire window. To create this sort of link, we add target="_blank" to the <A ...> tag:
       
      <A HREF="wwtarget.html" target="_blank">
       
      "_top" is a reserved name which is automatically given to the entire window
       

      No Frames

       
      Browsers that know frames will ignore everything between <NOFRAMES> and </NOFRAMES>. Browsers that don't understand frames will also not understand (and therefore ignore) <NOFRAMES> and display the content
       
      To create a borderless frameset, use a <FRAMESET ...> tag with FRAMEBORDER, FRAMESPACING, and BORDER attributes like this:
      1. <FRAMESET ROWS="20%,*" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>   
      Restrict our page from iframe
       
      If you don't want your page to be framed, put this little Javascript in the page:
      1. <SCRIPT TYPE="text/javascript">    
      2. <!--    
      3. if (top != self)    
      4.      top.location=self.document.location;    
      5. //-->    
      6. </SCRIPT>   
        This script checks to see if the current page is the "top" page. If it is not, it tells the web browser to load the current web page as the top, thus wiping out any frames.
         
        Always our page to be framed
         
        Sometimes a particular web page only makes sense if it appears in a frame.
        1. <SCRIPT TYPE="text/javascript">    
        2. <!--    
        3. function checkframed(url)    
        4. {    
        5. if (top == self)    
        6.    document.write(    
        7.       '<DIV STYLE="padding:8pt;' +    
        8.       'border-style:solid;border-width:8pt;' +    
        9.       'border-color:66CC33;">' +    
        10.       '<STRONG>' +    
        11.       'This page is intended as part of a ' +    
        12.       '<A HREF="' + url + '">framed document</A>.' +    
        13.       '</STRONG></DIV>');    
        14. }    
        15. checkframed("dgftop.html");    
        16. //-->    
        17. </SCRIPT>   
          FRAME Attributes 
          1. FRAMEBORDER = YES | 1 | NO | 0  
          2. FRAMESPACING = integer  
          3. BORDER = integer  
          4. COLS = integer  
          5. ROWS = integer  
          6. BORDERCOLOR = color expression  
          7. SRC = "URL"  
          8. NAME = "text string"  
          9. SCROLLING = YES | NO | AUTO  
          10. NORESIZE says that the user cannot make the frame bigger or smaller by sliding the borders  
          11. FRAMEBORDER = YES | 1 | NO | 0 


          Similar Articles