{"id":223,"date":"2009-02-20T12:02:00","date_gmt":"2009-02-20T12:02:00","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=223"},"modified":"2009-02-20T12:02:00","modified_gmt":"2009-02-20T12:02:00","slug":"automatically-resize-the-iframe-to-adjust-to-the-form-size","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2009\/02\/automatically-resize-the-iframe-to-adjust-to-the-form-size\/","title":{"rendered":"Automatically resize the IFRAME to adjust to the Form size"},"content":{"rendered":"<div align=\"justify\">If you need to show an external page within CRM, you need to provide the URL to the IFRAME in CRM. You will notice that it would not display scrollbars to scroll through the entire web page being displayed in the IFRAME. So it is advised that we create a custom page and add an IFRAME within a &#8220;DIV&#8221; tag. This helps in bringing up the Scroll bars to allow users to navigate through the entire page.But there is still a glitch. If you happen to resize the form on which the IFRAME has been added, you will find that the IFRAME does not automatically resize itself according to the form.Here is the script that we used to achieve this.<br \/>\nHere we try to resize the two IFRAMES (&#8216;IFRAME_ActivityShow&#8217; and &#8216;IFRAME_ReportShow&#8217;) that were added on the CRM form.<br \/>\nAdd the below function in the custom page on which the IFRAME has been originally placed<br \/>\nfunction calcHeightWidth()<br \/>\n{<br \/>\nvar main_height = null;<br \/>\nvar main_width = null;<br \/>\nvar height = null;<br \/>\nvar width = null;<br \/>\n\/\/ for all except Explorer<br \/>\nif (self.innerHeight) {<br \/>\nmain_height = self.innerHeight;<br \/>\nmain_width = self.innerWidth;<br \/>\n\/\/ Explorer 6 Strict Mode<br \/>\n} else if (document.documentElement<br \/>\n&amp;&amp; document.documentElement.clientHeight) {<br \/>\nmain_width = document.documentElement.clientWidth;<br \/>\nmain_height = document.documentElement.clientHeight;<br \/>\n\/\/ other Explorers<br \/>\n} else if (document.body) {<br \/>\nmain_height = document.body.clientHeight;<br \/>\nmain_width = document.body.clientWidth;<br \/>\n}<br \/>\nheight = main_height * (3\/4) + &#8216;px&#8217;;<br \/>\nwidth = main_width * (1\/2) + &#8216;px&#8217;;<br \/>\n\/\/change the height of the iframe<br \/>\ndocument.getElementById(&#8216;IFRAME_ActivityShow&#8217;).style.height=height;<br \/>\ndocument.getElementById(&#8216;IFRAME_ActivityShow&#8217;).style.width=width;<br \/>\ndocument.getElementById(&#8216;IFRAME_ReportShow&#8217;).style.height=height;<br \/>\ndocument.getElementById(&#8216;IFRAME_ReportShow&#8217;).style.width=width;<br \/>\n}<br \/>\nWe need to attach this function to the IFRAME in the page load event of the custom page.<br \/>\nif (!Page.IsPostBack)<br \/>\n{<br \/>\nIFRAME_ActivityShow.Attributes.Add(&#8220;onload&#8221;,&#8221;javascript:calcHeightWidth()&#8221;);<br \/>\n}<br \/>\nHope this helps others too!\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you need to show an external page within CRM, you need to provide the URL to the IFRAME in CRM. You will notice that it would not display scrollbars to scroll through the entire web page being displayed in the IFRAME. So it is advised that we create a custom page and add an\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2009\/02\/automatically-resize-the-iframe-to-adjust-to-the-form-size\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[19],"tags":[991,1555],"class_list":["post-223","post","type-post","status-publish","format-standard","hentry","category-dynamics-crm","tag-link","tag-scripting"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}