june 1, 2011

iFrames

(W3C)

iFrames were popular some years ago, sometimes whole sites were built using them, but they were more of a novelity than anything else and over time they have fallen by the wayside. At the moment they are mostly used for third party advertising and code snippits.

iFrames allow you to dynamically change content within a page without the use of additional scripting . With iFrames you are able to load a page into a section of another page.

Although W3C has discarded frames for html5 it has still retained iframes which now include a couple of improvements.




intro  |  one  |  two  |  three 


What are iFrames



  • iFrames are an inline element
  • iFrames allows you to embed a document into an existing page
  • iFrames allow different types of documents to be embedded (html, pdf, etc)
  • iFrames allow the embeded document to appear to be part of the existing page.
  • iFrames allow users to scroll within the frame
  • iFrames allow for easy editing of the external content


Why use an iFrame



  • External Advertisments
  • Snippits of Code
  • Embedded Content from Another Site
  • A Section of a Page that is Common to other Pages , header, footer etc.
  • Videos
    Its easy to embed youTube Videos into iFrames
  • Portfolios - When your images are used as a background of the loading page it is harder for them to be downloaded by the user (but not impossible)
  • Content that is continually edited

iFrame Attributes html5

  • name


    The name of the iFrame will be use for the target when linking to information that will be embedded
    <iframe name="frameOne"></iframe>
    <a href="content" target="frameOne"></a>

  • src


    The url of the document that is shown in the iFrame
    <iframe name="frameOne" src="initial content"></iframe>
    Absolute or Relative
    ALERT : even when using srcdoc you will need to include src for older browsers that cannot read srcdoc

  • srcdoc

    new to html5
    <iframe name="frameOne" srcdoc="initial content"></iframe>
    The html code that will be displayed in the iFrames. Some tags become optional <title><body> etc. depending upon the section of the page that you are embedding
    This will override src (in current browsers that can read html5)

  • seamless

    new to html5
    <iframe name="frameOne" srcdoc="initial content" seamless="seamless"></iframe>

    Will eliminate scrollbars content will embed seamlessly into the page
    ALERT : see below for older browsers

  • sandbox

    new to html5
    A list of permissions
    <iframe name="frameOne" srcdoc="initial content" seamless="seamless" sandbox="see below"></iframe>
      1. sandbox="allow-forms"
        Allows forms within the embedded content

      2. sandbox="allow-scripts"
        Allows scripts within the embedded content
        Do not use with "allow-same-origin"

      3. sandbox="allow-same-origin"
        allow it to access html element of the original document and prevents it from running scripts.

      4. sandbox="allow-top-navigation"
        target="_top" is allowed to replace the current document.


  • width and height
    must reflex the diminsion of the embedded content

ALERT: You will need to include some attributes from html4 for older browsers

iFrame Attributes html4


  • Frameborder
    Use for browsers that do not use seamless
    framborder="no", or number
  • Scrolling
    Use for browsers that do not use seamless
    scrolling="no", yes or auto
  • src even when using srcdoc you will need to include src for older browsers that cannot read srcdoc





share / bookmark



Send the link for this page to yourself




books



Both of the following books are good but they mainly cover the basics of what the current browsers (early 2011) can do at the moment.

Type

Html5 for Web Designers
by Jeremy Keith
A List Apart

Introduction to HTML5

Introduction to HTML5
by Bruce Lawson and Remy Sharp
Amazon


join follow up up