Netvibes IFRAME mini module

This post describes how to put together a Netvibes.com Mini Module that shows an existing web page within an IFRAME. My Space Browse viewer example is listed in the Netvibes ecosystem gallery. You can also install it by clicking here:   (Note that this image link uses addApiModule.php not subscribe.php.)

You can see the complete code for this module if you go here and then view source. Simply viewing the page shows the Edit options.

A Netvibes Mini Module is a public web page. My technique is to keep the module web page separate from the web page that does the main work. This lets me have one viewer page that I can share across various mashup scenarios such as gadgets, widgets or plain IFRAMEs.

It is assumed that you have a web page available that is designed to display output in a small space. This might be existing gadget/widget code or perhaps PDA output.

The core of an IFRAME module is this JavaScript onload handler in the header which creates an IFRAME and adds it to the module:
<script type="text/javascript">
var url = "http://www.spacebrowse.com/gadget/SpaceBrowseViewer.aspx?Caller=NV";
NV_ONLOAD = function()
{
  var m_iframe = document.createElement("iframe");
  m_iframe.scrolling = "no";
  m_iframe.frameBorder = "0";
  m_iframe.src = url;
  m_iframe.width="100%";
  m_iframe.height="240px";
  m_iframe.border="0px";
  m_iframe.padding="0px";
  m_iframe.margin="0px";
  m_iframe.overflow="hidden";
  NV_CONTENT.appendChild(m_iframe);
}
</script>
An IFRAME is a rectangular window on a web page that displays the contents of another URL. The web page at this other URL only sees the (small) rectangular window it is given, and cannot interact with anything else on the page including your module code.

Note that the IFRAME is given a fixed height but 100% width. Your web page can find the actual width that you have available in document.body.scrollWidth.

If your page is configurable then add a form with class "configuration" to the body of your module, eg to add a search parameter:
<form class="configuration" method="post" action="">
  <label>Search:</label>
  <input name="Search" type="text" value="" />
</form>

The user's preferences are available using the Netvibes getValue() JavaScript function. You can then add any received value to your IFRAME URL as follows:
  var SearchWord = getValue("Search");
  if( SearchWord && SearchWord!="undefined")
    url += "&Search="+SearchWord;
You could also add a "Height" parameter and use it to change the IFRAME height.

Your module page should also include a definition of an icon to display in the module header, eg as follows:
<link rel="icon" type="image/png" href="http://www.spacebrowse.com/gadget/SpaceBrowseNetvibesIcon.png" />
The icon should be 16x16. The icon can be truncated in height so concentrate the image towards the top.

If you submit your module to the Netvibes then it is a good idea to have a screenshot available. I think that this is shown reduced to 160x120, with a link to a full size image.