Home > DevNotes, SharePoint, TechNotes > iFrame page template for MOSS

iFrame page template for MOSS


As you all know, the web page viewer web part included in Sharepoint does not support dynamic sizing of the iFrame it creates. Because of this, I found the need for a page template which users might use to create a Sharepoint page with external content. The following code is the entire page template, which might be used as is by anyone it might suit.

Please not that the javascript variable FooterHeight has to be set according to the whitespace you would like at the bottom the page. The height of 30 pixels is based on the footer height of the default collaboration master included in Sharepoint 2007.

<%@ Page language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>   <asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
   <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitleInTitleArea" runat="server">
   <SharePointWebControls:TextField runat="server" id="TitleField" FieldName="Title"/>
</asp:Content>
<asp:Content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
   <PublishingWebControls:editmodepanel runat="server" id="editmodestyles">
     <!-- Styles for edit mode only-->
     <SharePointWebControls:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/zz2_editMode.css %>" runat="server"/>
   </PublishingWebControls:editmodepanel>
   <SharePointWebControls:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/rca.css %>" runat="server"/>
   <SharePointWebControls:FieldValue id="PageStylesField" FieldName="HeaderStyleDefinitions" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server">
   <div class="breadcrumb">
     <asp:SiteMapPath ID="siteMapPath" Runat="server" SiteMapProvider="CurrentNavSiteMapProviderNoEncode" RenderCurrentNodeAsLink="false" SkipLinkText="" CurrentNodeStyle-CssClass="breadcrumbCurrent" NodeStyle-CssClass="ms-sitemapdirectional"/>
   </div>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
   <SharePointWebControls:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/pageLayouts.css %>" runat="server"/>
   <table id="MSO_ContentTable" cellpadding="0" cellspacing="0" border="0" width="100%">
     <tr>
        <td>
           <div class="pageContent">
             <PublishingWebControls:RichHtmlField id="content" FieldName="PublishingPageContent" runat="server"/>
           </div>
        </td>
     </tr>
     <tr>
        <td style="padding-top: 5px;">
     <WebPartPages:WebPartZone runat="server" FrameType="None" AllowPersonalization="false" Title="<%$Resources:sps,LayoutPageZone_BottomZone%>" ID="MiddleLeftZone" Orientation="Vertical" QuickAdd-ShowListsAndLibraries="false" allowlayoutchange="false"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> <!-- _locID@Title="L_MiddleLeftZone_Title" -->
        </td>
     </tr>
   </table>
   <PublishingWebControls:editmodepanel runat="server" id="editmodepanel1">
     <!-- Add field controls here to bind custom metadata viewable and editable in edit mode only.-->
     <table cellpadding="10" cellspacing="0" align="center" class="editModePanel">
        <tr>
           <td>
             <PublishingWebControls:RichImageField id="ContentQueryImage" FieldName="PublishingRollupImage" AllowHyperLinks="false" runat="server"/>
           </td>
           <td width="200">
             <asp:label text="<%$Resources:cms,Article_rollup_image_text%>" runat="server" />
           </td>
        </tr>
     </table>
   </PublishingWebControls:editmodepanel>
<script language="JavaScript">
  <!--
    function resizeFrame() {
      objFrame = document.getElementsByTagName("iframe").item(0);
      windowHeight = document.body.offsetHeight;
      headerHeight = absoluteTop(objFrame);
      iframeHeight = windowHeight - (headerHeight + footerHeight);
      if (iframeHeight >=0) { objFrame.style.height = iframeHeight};
      objFrame.style.border = "1px solid gray";
      objFrame.style.margin = "0px";
    }       function absoluteTop(objNode) {
      var currentNode=objNode;
      var sumTop=0;
      while(currentNode.tagName!="BODY"){
        sumTop+=currentNode.offsetTop;
        currentNode=currentNode.offsetParent;
      }
    return sumTop;
    }       function getFooterHeight() {
      objPlaceHolder = document.getElementById("ctl00_MSO_ContentDiv");
      footH = document.body.offsetHeight - (absoluteTop(objPlaceHolder) + objPlaceHolder.offsetHeight);
      return footH;
    }       var footerHeight = 30;
    window.attachEvent ("onresize", resizeFrame);
    window.attachEvent ("onload", resizeFrame);
  //  resizeFrame();
  //  footerHeight = getFooterHeight();
  // -->
</script>
</asp:Content>  

N’Joy!

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: