.. You may want to use the usual include line. Uncomment and adjust the path. 
.. include:: ../Includes.txt


==========================
EXT: Flexform based IFrame
==========================

:Author:
      Kasper Skårhøj

:Created:
      2002-11-01T00:32:00

:Changed:
      2006-04-08T00:13:10

:Author:
      Peter Klein

:Email:
      peter@umloud.dk

:Info 3:


:Info 4:


.. _EXT-Flexform-based-IFrame:

EXT: Flexform based IFrame
==========================

Extension Key:  **ffiframe**

Copyright 2006, Peter Klein, <peter@umloud.dk>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

\- a GNU/GPL CMS/Framework available from www.typo3.com

.. _Table-of-Contents:

Table of Contents
-----------------

**EXT: Flexform based IFrame 1**

**Introduction 1**

What does it do? 1

Screenshots 2

**Users manual 3**

**Adminstration 4**

**Configuration 4**

Reference 4

**Known problems 5**

**To-Do list 5**

**Changelog 5**


.. _Introduction:

Introduction
------------


.. _What-does-it-do:

What does it do?
^^^^^^^^^^^^^^^^

This extension adds a new content type to the backend of Typo3. This
new type allows to insert the html tag <iframe> to embed another page
specified by an URL. All attributes of the iframe tag according to the
HTML 4.01 Specification of the W3C can be specified in the backend.

The extension uses flexform instead of extending the table
tt\_content, and is totally configurable from either flexform or
typoscript.

The extension uses version II of the `DynamicDrive Iframe SSI
javascript
<http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm>`_
(optional), which lets you seamlessly display external content on your
page via an IFRAME. It does this by dynamically resizing the IFRAME to
be the height of the page contained within it, eliminating any
possible IFRAME scrollbars from appearing while snugly showing the
entire external content. Think of it as SSI (server side includes)
emulated using DHTML! This script works in both IE5+ and NS6+, and for
other browsers, supports the option to either completely hide the
iframe in question or display it using its default height.

Now, you can load additional documents\*into the IFRAME even after the
page has loaded, and the IFRAME will dynamically adjust its height to
fit the new document. So use this script if you need to not only
display external content via the IFRAME tag, but intend to change this
content after the page has loaded.

You can also use links on your main page to load a page into your
IFRAME (with the IFRAME automatically resized to that page's height of
course). To do so, the link should look like this:

::

   <a href="javascript:loadintoIframe('myframe', 'external.htm')">Link</a>

where "myframe" is the ID of the IFRAME you wish to load a page into,
and "external.htm", the path to the page on your site to load.

*\**  *If the autosize option is enabled, then all external pages
loaded into the iframe must be from the same domain as the page the
iframe tag is inserted in. Setting the iframe's src to an external
site such as " `http://www.typo3.org <http://www.typo3.org/>`_ " will
not work, since the script cannot probe and detect the height of pages
from external domains.*


.. _Screenshots:

Screenshots
^^^^^^^^^^^

The following screenshot shows the configuration in the backend.

|img-1|


.. _Users-manual:

Users manual
------------


.. _generated:

((generated))
^^^^^^^^^^^^^

.. _Creating-an-Inline-Frame:

Creating an Inline Frame
""""""""""""""""""""""""

Create a new content element on the page you want to embed the IFRAME
and select the plugin Inline frame.

|img-2|

After this you can specify all attributes of the iframe tag according
to the HTML 4.01 Specification of the W3C.

If you're not sure about the different attributes please refer to this
specification ( `http://www.w3.org/TR/1999/REC-
html401-19991224/present/frames.html#h-16.5 <http://www.w3.org/TR/1999
/REC-html401-19991224/present/frames.html#h-16.5>`_ ) and examine the
generated tag in the html source code of your page. The URL can be
relative as shown in the image below or absolute, e.g.
`http://www.typo3.org <http://www.typo3.org/>`_

|img-1|


.. _Adminstration:

Adminstration
-------------


.. _generated:

((generated))
^^^^^^^^^^^^^

.. _Installation:

Installation
""""""""""""

The extension is installed as any other extension via the Extension
Manager.


.. _Configuration:

Configuration
-------------

In addition to the backend configuration as shown in the image above,
the plugin can also be configured by Typoscript.


.. _Reference:

Reference
^^^^^^^^^

.. ### BEGIN~OF~TABLE ###


.. _src:

src
"""

.. container:: table-row

   Property
         src
   
   Data type
         string /stdWrap
   
   Description
         Content of the IFRAMEs SRC propertyMust be on the same domain as site
         if autoresize is enabled.
   
   Default



.. _width:

width
"""""

.. container:: table-row

   Property
         width
   
   Data type
         int /stdWrap
   
   Description
         Content of the IFRAMEs WIDTH property
   
   Default



.. _height:

height
""""""

.. container:: table-row

   Property
         height
   
   Data type
         int /stdWrap
   
   Description
         Content of the IFRAMEs HEIGHT propertyIf autoresize is enabled, then
         the height will be based on the height of the document loaded into the
         IFRAME.
   
   Default



.. _marginwidth:

marginwidth
"""""""""""

.. container:: table-row

   Property
         marginwidth
   
   Data type
         int /stdWrap
   
   Description
         Content of the IFRAMEs MARGINWIDTH property
   
   Default



.. _marginheight:

marginheight
""""""""""""

.. container:: table-row

   Property
         marginheight
   
   Data type
         int /stdWrap
   
   Description
         Content of the IFRAMEs MARGINHEIGHT property
   
   Default



.. _style:

style
"""""

.. container:: table-row

   Property
         style
   
   Data type
         string /stdWrap
   
   Description
         Content of the IFRAMEs STYLE property
   
   Default



.. _class:

class
"""""

.. container:: table-row

   Property
         class
   
   Data type
         string /stdWrap
   
   Description
         Content of the IFRAMEs CLASS property
   
   Default



.. _id:

id
""

.. container:: table-row

   Property
         id
   
   Data type
         string /stdWrap
   
   Description
         Content of the IFRAMEs ID property.Required if autoresize is enabled.
   
   Default



.. _name:

name
""""

.. container:: table-row

   Property
         name
   
   Data type
         string /stdWrap
   
   Description
         Content of the IFRAMEs NAME property
   
   Default



.. _frameborder:

frameborder
"""""""""""

.. container:: table-row

   Property
         frameborder
   
   Data type
         boolean /stdWrap
   
   Description
         Content of the IFRAMEs FRAMEBORDER property
   
   Default
         1



.. _scrolling:

scrolling
"""""""""

.. container:: table-row

   Property
         scrolling
   
   Data type
         string /stdWrap
   
   Description
         Content of the IFRAMEs SCROLLING propertyPossible values: yes,no and
         auto
   
   Default



.. _title:

title
"""""

.. container:: table-row

   Property
         title
   
   Data type
         string /stdWrap
   
   Description
         Content of the IFRAMEs TITLE property
   
   Default



.. _longdesc:

longdesc
""""""""

.. container:: table-row

   Property
         longdesc
   
   Data type
         string /stdWrap
   
   Description
         Content of the IFRAMEs LONGDESC property
   
   Default



.. _autoresize:

autoresize
""""""""""

.. container:: table-row

   Property
         autoresize
   
   Data type
         boolean /stdWrap
   
   Description
         Enable javascript to auto resize the height of the IFRAME based on the
         height of the document loaded into the IFRAME?
   
   Default
         0


.. ###### END~OF~TABLE ######

[tsref:(cObject).plugin.tx\_ffiframe\_pi1]


.. _generated:

((generated))
"""""""""""""

.. _Example:

Example
~~~~~~~

Here an example:

::

   lib.myIframe < plugin.tx_ffiframe_pi1
   lib.myIframe {
     src = fileadmin/templates/tabs.html
     frameborder = 0
     width = 400
     height = 100
     id = myIframe
     scrolling = no
     autoresize = 1
   }


.. _Known-problems:

Known problems
--------------

\- None.


.. _To-Do-list:

To-Do list
----------

\- Nothing at the moment.


.. _Changelog:

Changelog
---------

- 21-Mar-06 First version.

- 05-Apr-06 Bugfix release

- Frameborder parameter was set incorrectly, as default for an IFRAME is
  "frameborder=1", but the plugin assumed that it was "frameborder=0" -
  Thanks to Stephan Bauer for reporting this bug.

- URLs are now parsed through the typolink function, so now it is
  possible to link to internal TYPO3 pages as well.

- Added check to test if the "src" URL is really on local domain, if the
  autoresize option is enabled.

- Added support for "longdesc" parameter.

|img-3| EXT: Flexform based IFrame - 5


.. ######CUTTER_MARK_IMAGES######

.. |img-1| image:: img-1.png
.. :align: left
.. :border: 0
.. :height: 603
.. :id: Grafik1
.. :name: Grafik1
.. :width: 590

.. |img-2| image:: img-2.png
.. :align: left
.. :border: 0
.. :height: 257
.. :id: Graphic5
.. :name: Graphic5
.. :width: 488

.. |img-3| image:: img-3.png
.. :align: left
.. :border: 0
.. :height: 32
.. :id: Graphic1
.. :name: Graphic1
.. :width: 102