{"id":1120,"date":"2006-04-30T01:11:00","date_gmt":"2006-04-30T06:11:00","guid":{"rendered":"http:\/\/blogs.devhorizon.com\/reza\/?p=1120"},"modified":"2006-04-30T01:11:00","modified_gmt":"2006-04-30T06:11:00","slug":"programmatically-resizing-iframe-height","status":"publish","type":"post","link":"https:\/\/blogs.devhorizon.com\/reza\/2006\/04\/30\/programmatically-resizing-iframe-height\/","title":{"rendered":"Programmatically resizing IFRAME height"},"content":{"rendered":"<p><P>Have you ever tried to use &#8220;Page Viewer Webpart&#8221; in sharepoint ? There is a big problem setting the height for this webpart when the page, that is loaded in its iframe, varies in height. In some cases scrollbars appear even if the height is set in webpart property. In respond to a client request, I have recently developed a WSS template that contains a web part which iterates through a pre-defined\/pre-populated document library, looking&nbsp; for default.aspx or default.html and renders that page in an IFRAME. I had to dynamically resize the document library in run time according to the height of the page it points to. My solution contains a java script file named &#8220;iFrameResizer.js&#8221; that is set to be &#8220;Content&#8221; of my web part and a little bit of code in my web part to link to this script file to my web part.<\/P><br \/>\n<P>&nbsp;<\/P><br \/>\n<P>\/\/&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<\/P><br \/>\n<P>\/\/iFrameResizer.js<\/P><br \/>\n<P>\/\/&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<\/P><br \/>\n<P>\/* This function is used to adjust the iframe height to its content *\/<BR>function iResizer(iframeID,iframeName)<BR>{<\/P><br \/>\n<P>&nbsp;&nbsp;&nbsp;&nbsp; moz=document.getElementById&amp;&amp;!document.all<BR>&nbsp;&nbsp;&nbsp;&nbsp; mozHeightOffset=20<BR>&nbsp;&nbsp;&nbsp; document.getElementById(iframeID).width=&#8221;100%&#8221;<BR>&nbsp;&nbsp;&nbsp; document.getElementById(iframeID).height=window.frames[iframeName].document.body.scrollHeight+(moz?mozHeightOffset:0)<BR>}<\/P><br \/>\n<P>&nbsp;<\/P><br \/>\n<P><BR>Then in the constructor of&nbsp; web part I added an event handler to the PreRender event that loads \u201ciFrameResizer.js\u201d onto the page on prerendering&nbsp; :<\/P><br \/>\n<P>&nbsp;<\/P><br \/>\n<P>using System;<BR>using System.ComponentModel;<BR>using System.Web.UI;<BR>using System.Web.UI.WebControls;<BR>using System.Xml.Serialization;<BR>using Microsoft.SharePoint;<BR>using Microsoft.SharePoint.Utilities;<BR>using Microsoft.SharePoint.WebPartPages;<\/P><br \/>\n<P>namespace DevHorizon.Sharepoint.iFrameWP<BR>{<BR>&nbsp;\/\/\/ <BR>&nbsp;\/\/\/ Description for Frame.<BR>&nbsp;\/\/\/ <BR>&nbsp;[DefaultProperty(&#8220;Url&#8221;),<BR>&nbsp; ToolboxData(&#8220;&lt;{0}:Frame runat=server&gt;&#8221;),<BR>&nbsp; XmlRoot(Namespace=&#8221;DevHorizon.Sharepoint.iFrameWP&#8221;)]<BR>&nbsp;public class Frame : WebPart<BR>&nbsp;{<BR>&nbsp; private const string defaultUrl = &#8220;shared%20documents\/default.htm&#8221;;<BR>&nbsp; private string url = defaultUrl;<\/P><br \/>\n<P>&nbsp; \/\/ Used for the linked script file<BR>&nbsp; private const string iFrameResizerFileName = &#8220;iFrameResizer.js&#8221;;<BR>&nbsp; private const string iFrameResizerIncludeScriptKey = &#8220;iFrameResizerIncludeScript&#8221;;<BR>&nbsp; private const string IncludeScriptFormat =@&#8221; language=&#8221;&#8221;{0}&#8221;&#8221; src=&#8221;&#8221;{1}{2}&#8221;&#8221;&gt;&#8221;;<\/P><br \/>\n<P><BR>&nbsp; <BR>&nbsp; [Browsable(true),Category(&#8220;Miscellaneous&#8221;),DefaultValue(defaultUrl),WebPartStorage(Storage.Personal),FriendlyName(&#8220;Url&#8221;),Description(&#8220;URL Property&#8221;)]<BR>&nbsp; public string Url<BR>&nbsp; {<BR>&nbsp;&nbsp;&nbsp;&nbsp; get<BR>&nbsp;&nbsp;&nbsp;&nbsp; {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return url;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<\/P><br \/>\n<P>&nbsp;&nbsp; set<BR>&nbsp;&nbsp;&nbsp;&nbsp; {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url = value;<BR>&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp; }<\/P><br \/>\n<P>&nbsp;<\/P><br \/>\n<P>&nbsp; \/\/ Contructor<BR>&nbsp; public Frame()<BR>&nbsp; {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.PreRender += new EventHandler(WebPart_Frame_PreRender);<BR>&nbsp; }<\/P><br \/>\n<P>&nbsp; \/\/Function which will register the linked file script <\/P><br \/>\n<P>&nbsp;<\/P><br \/>\n<P>&nbsp; private void WebPart_Frame_PreRender(object sender , System.EventArgs e )<BR>&nbsp; {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string location = null;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/ Make sure that the script was not already added to the page.<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!Page.IsClientScriptBlockRegistered(iFrameResizerIncludeScriptKey))<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; location = this.ClassResourcePath + &#8220;\/&#8221;;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/ Create the client script block.<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string includeScript = String.Format(IncludeScriptFormat, &#8220;javascript&#8221;, location, iFrameResizerFileName);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Page.RegisterClientScriptBlock(iFrameResizerIncludeScriptKey, includeScript);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<\/P><br \/>\n<P>&nbsp; }<\/P><br \/>\n<P>&nbsp;<\/P><br \/>\n<P>&nbsp; protected override void CreateChildControls()<BR>&nbsp; {<BR>&nbsp;&nbsp; Literal lit = new Literal();<BR>&nbsp;&nbsp; Guid gid=Guid.NewGuid();<BR>&nbsp;&nbsp; string iframeID=&#8221;ExxoniFrameWPId&#8221; + gid.ToString();<BR>&nbsp;&nbsp; string iframeName= &#8220;ExxoniFrameWPName&#8221; + gid.ToString();<BR>&nbsp;&nbsp; lit.Text = &#8220;&#8221;; <\/P><br \/>\n<P>&nbsp;&nbsp; this.Controls.Add(lit);<\/P><br \/>\n<P>&nbsp; }<BR>&nbsp;<BR>&nbsp; protected override void RenderWebPart(HtmlTextWriter output)<BR>&nbsp; {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; try<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; RenderChildren(output);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp;&nbsp; \/\/display diagnostic error information if exception occurs<BR>&nbsp;&nbsp;&nbsp;&nbsp; catch(Exception ex)<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; output.Write(&#8221; <\/P><br \/>\n<P>&#8220;); <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; output.Write(&#8220;Exception Type: &#8221; + ex.GetType().ToString() + &#8220;<BR>&#8220;);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; output.Write(&#8220;Exception Message: &#8221; + ex.Message + &#8220;<\/P><br \/>\n<P>&#8221; );<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; output.Write(&#8220;Stack Trace:&#8221; + ex.StackTrace.Replace(&#8221;<br \/>\n&#8220;, &#8220;<BR>&#8220;));<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; output.Write(&#8220;<BR>&#8220;);<BR>&nbsp;&nbsp; } <\/P><br \/>\n<P>&nbsp; }<BR>&nbsp;}<BR>}<\/P><br \/>\n<P>&nbsp;<\/P><br \/>\n<P>There is one thing to remember:<\/P><br \/>\n<P>I assume that iFrameResizer.js has been already added to the solution as &#8220;content&#8221; and is deployed to wpresources (or _wpresources if web part is installed in GAC). You have to add the following code to Manifest.xml<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever tried to use &#8220;Page Viewer Webpart&#8221; in sharepoint ? There is a big problem setting the height for this webpart when the page, that is loaded in its iframe, varies in height. In some cases scrollbars appear even if the height is set in webpart property. In respond to a client request, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-1120","post","type-post","status-publish","format-standard","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Programmatically resizing IFRAME height - Reza Alirezaei&#039;s Blog %<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.devhorizon.com\/reza\/2006\/04\/30\/programmatically-resizing-iframe-height\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Reza Alirezaei\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/2006\\\/04\\\/30\\\/programmatically-resizing-iframe-height\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/2006\\\/04\\\/30\\\/programmatically-resizing-iframe-height\\\/\"},\"author\":{\"name\":\"Reza Alirezaei\",\"@id\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/#\\\/schema\\\/person\\\/cdbb24d283697a65951cb4a14e474938\"},\"headline\":\"Programmatically resizing IFRAME height\",\"datePublished\":\"2006-04-30T06:11:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/2006\\\/04\\\/30\\\/programmatically-resizing-iframe-height\\\/\"},\"wordCount\":777,\"commentCount\":0,\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/2006\\\/04\\\/30\\\/programmatically-resizing-iframe-height\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/2006\\\/04\\\/30\\\/programmatically-resizing-iframe-height\\\/\",\"url\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/2006\\\/04\\\/30\\\/programmatically-resizing-iframe-height\\\/\",\"name\":\"Programmatically resizing IFRAME height - Reza Alirezaei's Blog %\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/#website\"},\"datePublished\":\"2006-04-30T06:11:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/#\\\/schema\\\/person\\\/cdbb24d283697a65951cb4a14e474938\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/2006\\\/04\\\/30\\\/programmatically-resizing-iframe-height\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/#website\",\"url\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/\",\"name\":\"Reza Alirezaei's Blog\",\"description\":\"Blogging from the field!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/#\\\/schema\\\/person\\\/cdbb24d283697a65951cb4a14e474938\",\"name\":\"Reza Alirezaei\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ba940d84e0ecb909e62e93df4c56daf0395c7e53c914467ab2ee73124a7d7b6?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ba940d84e0ecb909e62e93df4c56daf0395c7e53c914467ab2ee73124a7d7b6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ba940d84e0ecb909e62e93df4c56daf0395c7e53c914467ab2ee73124a7d7b6?s=96&d=mm&r=g\",\"caption\":\"Reza Alirezaei\"},\"url\":\"https:\\\/\\\/blogs.devhorizon.com\\\/reza\\\/author\\\/rezaa\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Programmatically resizing IFRAME height - Reza Alirezaei's Blog %","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogs.devhorizon.com\/reza\/2006\/04\/30\/programmatically-resizing-iframe-height\/","twitter_misc":{"Written by":"Reza Alirezaei","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogs.devhorizon.com\/reza\/2006\/04\/30\/programmatically-resizing-iframe-height\/#article","isPartOf":{"@id":"https:\/\/blogs.devhorizon.com\/reza\/2006\/04\/30\/programmatically-resizing-iframe-height\/"},"author":{"name":"Reza Alirezaei","@id":"https:\/\/blogs.devhorizon.com\/reza\/#\/schema\/person\/cdbb24d283697a65951cb4a14e474938"},"headline":"Programmatically resizing IFRAME height","datePublished":"2006-04-30T06:11:00+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.devhorizon.com\/reza\/2006\/04\/30\/programmatically-resizing-iframe-height\/"},"wordCount":777,"commentCount":0,"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blogs.devhorizon.com\/reza\/2006\/04\/30\/programmatically-resizing-iframe-height\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogs.devhorizon.com\/reza\/2006\/04\/30\/programmatically-resizing-iframe-height\/","url":"https:\/\/blogs.devhorizon.com\/reza\/2006\/04\/30\/programmatically-resizing-iframe-height\/","name":"Programmatically resizing IFRAME height - Reza Alirezaei's Blog %","isPartOf":{"@id":"https:\/\/blogs.devhorizon.com\/reza\/#website"},"datePublished":"2006-04-30T06:11:00+00:00","author":{"@id":"https:\/\/blogs.devhorizon.com\/reza\/#\/schema\/person\/cdbb24d283697a65951cb4a14e474938"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.devhorizon.com\/reza\/2006\/04\/30\/programmatically-resizing-iframe-height\/"]}]},{"@type":"WebSite","@id":"https:\/\/blogs.devhorizon.com\/reza\/#website","url":"https:\/\/blogs.devhorizon.com\/reza\/","name":"Reza Alirezaei's Blog","description":"Blogging from the field!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.devhorizon.com\/reza\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogs.devhorizon.com\/reza\/#\/schema\/person\/cdbb24d283697a65951cb4a14e474938","name":"Reza Alirezaei","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3ba940d84e0ecb909e62e93df4c56daf0395c7e53c914467ab2ee73124a7d7b6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3ba940d84e0ecb909e62e93df4c56daf0395c7e53c914467ab2ee73124a7d7b6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ba940d84e0ecb909e62e93df4c56daf0395c7e53c914467ab2ee73124a7d7b6?s=96&d=mm&r=g","caption":"Reza Alirezaei"},"url":"https:\/\/blogs.devhorizon.com\/reza\/author\/rezaa\/"}]}},"_links":{"self":[{"href":"https:\/\/blogs.devhorizon.com\/reza\/wp-json\/wp\/v2\/posts\/1120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.devhorizon.com\/reza\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.devhorizon.com\/reza\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.devhorizon.com\/reza\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.devhorizon.com\/reza\/wp-json\/wp\/v2\/comments?post=1120"}],"version-history":[{"count":0,"href":"https:\/\/blogs.devhorizon.com\/reza\/wp-json\/wp\/v2\/posts\/1120\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.devhorizon.com\/reza\/wp-json\/wp\/v2\/media?parent=1120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.devhorizon.com\/reza\/wp-json\/wp\/v2\/categories?post=1120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.devhorizon.com\/reza\/wp-json\/wp\/v2\/tags?post=1120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}