The DNN IFrame module can be added to a page to provide a window onto another website page or a file. It may also be used to circumvent the DNN single form policy.
DotNetNuke breaks the addition of extra forms on a web page. These are often included with the snippet of HTML code provided by websites to enable external interaction. The HTML code is added as a new web page, saved on the website and the IFrame linked to it. Review the supplied code for security issues before initiating this.
No module settings, beyond the usual set, are included on the Settings page, obtained from the menu derived from clicking on the cogwheel.
For a given instance of the IFrame module there are a number of settings, accessed by clicking on the pencil icon and selecting Edit IFrame Options.
The page is divided into three sections:
- Options
- Other Options
- QueryString Parameters
Options
Listed under the Options section are the following:
Source
The DotNetNuke URL Control is included, configured to show Link Type: URL, Page or File. Selecting one of these changes the options accordingly. For example the URL link type expects the full URL address of a web page to be entered, whilst the file and page allow for selection by drop down lists of the chosen item.
Conveniently when selecting the URL link type an existing entry can be selected by clicking on the Select An existing URL button.
Width
The width of the IFrame can be entered. Ensure that the size to be used doesn’t distort your web page.
Historically the width of an IFrame could be entered in either pixels (200px) or as a percentage (80%). With the newer web standards (HTML 5) the width should now only be defined in pixels, shown as either 200px or simply 200.
Testing the width setting for this article I found that the web page of a responsive website responded accordingly, changing the page width to suit the width defined by the IFrame.
Height
The height of the IFrame follows the width in its options.
It is generally better to define the width and height of any HTML element, to avoid confusion and ensure the end result is as expected.
The default height for the IFrame under test was about 150px.
Auto Height
Testing the IFrame I found no difference made to the layout.
Scrolling
Three options are offered for the scrolling:
- No – Scroll bars are not shown. If the content is larger than the area assigned it will remain invisible.
- Yes – Scroll bars will be shown regardless of whether the content is larger.
- Auto – Scroll bars are added when the content in a direction is larger than the defined size.
Border
The use of a border (frameborder in HTML notation) is not supported in HTML 5 and may therefore not be shown.
Other Options
5 other options are configurable for the IFrame. These are:
Allow Transparency
Setting this parameter, and the associated CSS style does this Most modern websites are built to either the XHTML, or more recent HTML5 standard. this is an old parameter associated with IFrames. Using this parameter will invalidate the configuration.
Name
Giving the IFrame a unique name allows it to be referenced by JavaScript. This can then be used, for example, to change the configured content source. Name is now obsolete the preference being id instead.
Tool tip
Mouse over tool tip text for when the user hovers over the IFrame.
CSS Style
An alternative to the configuration of the height and width as set in the options above.
onLoad
Enables some JavaScript to be run when the IFrame is loaded. This can be used to confirm the content.
QueryString Parameters
QueryString parameters can be used to add parameters to the URL or page references. Note testing showed this not to work when referencing an image. Clicking on the Add QueryString Parameter adds some text boxes for the QueryString: Name and value. Enter the details and click on save. I tested the IFrame using one of the default DNN website icons (Awesome-Cycles-Logo.png) and an external website (www.vntweb.co.uk).
