Geek Answers Handbook

Resizing a dynamic iframe (Chrome issue)

So, I looked through all the other stack overflow messages and around Google on how to automatically set height / width on an iFrame. I survived about 15-20 of them, and so far no one has worked. Let me try to explain my situation:

I am dynamically adjusting the body of the iFrame on my page. I need the iFrame to automatically set its height and width so that all the text is visible.

I need this to work in IE (7 and 8), FireFox 3 and Chrome.

Here are other issues that arise in this issue:

  • I am writing in ASP.Net with the main page (therefore the body element is out of the question).
  • I need to set iFrame text for each postback from the server.
  • I need to resize the iFrame when resizing the browser.
  • All I have is javascript, nothing more.

I write everything in one domain, so this is not a problem.

I feel that I currently just have a drilling rig and will fall apart at any moment. It displays correctly in IE, but has a huge bottom margin in FireFox and does not display in Chrome at all (doc is always null).

Here it is (I tried to be as detailed as possible, let me know if I need to explain more):

<script type="text/javascript"> function WriteIFrame() { // get the text i need to put in the iFrame (this is set from the server) var iFrameContent = document.getElementById("<%= hiddenIFrameContent.ClientID %>").value; var iFrameContainer = document.getElementById("divIFrameContainer"); // create the new iFrame object var iFrame = document.createElement("iframe"); iFrame.setAttribute("id", "myIFrame"); iFrame.setAttribute("scrolling", "no"); iFrame.setAttribute("frameborder", "0"); // add the new iFrame object to the container div iFrameContainer.appendChild(iFrame); // find the correct inner document of the iFrame var doc = iFrame.document; if (doc == null && iFrame.contentDocument) doc = iFrame.contentDocument; // // write the information into the iFrame if (doc != null) { doc.open(); doc.writeln(iFrameContent); doc.close(); } // set the proper height var height = doc.body.scrollHeight + iFrameContainer.offsetTop; iFrame.setAttribute("style", "width: 100%; height: " + height + "px;"); } </script> <div id="divIFrameContainer" oninit="WriteIFrame();"> </div> <iframe id="HelperIFrame" style="display: none;" onload="WriteIFrame();"></iframe> <textarea id="hiddenIFrameContent" runat="server" style="display: none;" />
+4
source share
2 answers

Welllll, after I talked with this for a couple of hours, I finally got it to work.

That is why I am making it obvious, there is a problem with Chrome. If you dynamically set the contents of an iFrame when the page loads, you need to wait a few milliseconds before you can set the height correctly. Therefore, I used the setTimeout function, and it worked every time for all browsers, if you did not, sometimes Chrome will be twice as much as it should.

Here is the code I used to make it work in IE, FF, and Chrome:

 <script type="text/javascript"> function OnIFrameLoad() { _frame = document.createElement("iframe"); _frame.setAttribute("scrolling", "auto"); _frame.setAttribute("frameborder", "0"); _frame.setAttribute("style", "width: 100%;"); _frame.style.width = "100%"; document.getElementById("IFrameContainer").appendChild(_frame); _innerDoc = _frame.document; if (_frame.contentDocument) _innerDoc = _frame.contentDocument; // For NS6 if (_frame.contentWindow) _innerDoc = _frame.contentWindow.document; // For IE5.5 and IE6 // window.parent.SetIFrameContent(); // We're calling the ResizeIFrame function after 10 milliseconds because when // Chrome shows the iframe, it takes a few moments to get the correct height. setTimeout("window.parent.ResizeIFrame()", 10); } function SetIFrameContent() { var content = document.getElementById("<%= hiddenIFrameContent.ClientID %>").value; _innerDoc.open(); _innerDoc.writeln(content); _innerDoc.close(); } function ResizeIFrame(frameId) { var objectToResize = (_frame.style) ? _frame.style : _frame; var innerDocBody = _innerDoc.body; var newHeight = _innerDoc.body.clientHeight; if (_innerDoc.body.scrollHeight > newHeight) newHeight = _innerDoc.body.scrollHeight; // objectToResize.height = newHeight + 40 + "px"; } </script>

ASP side:

 <textarea id="hiddenIFrameContent" runat="server" style="display:none;" /> <div id="IFrameContainer"></div>
+6
source

This killed me, like everyone else, and I gave an example that seems to be compatible with IE8, Chrome, Safari, and FF. I have not tested it in IE7 or IE6.

I can’t take a 100% loan, because I have pieces from different sites. Most of the solutions I came across have complicated the problem.

I use coldfusion, so you will need to check the browser in your own language.

 <SCRIPT LANGUAGE="JavaScript"> function resizeIframeToFitContent(iframe) { // This function resizes an IFrame object // to fit its content. // The IFrame tag must have a unique ID attribute. iframe.height = document.frames[iframe.id].document.body.scrollHeight + "px";} </SCRIPT>

If it is FF, Safari or Mozilla (any version), you can use this script

 <SCRIPT LANGUAGE="JavaScript"> function resizeIframeToFitContent(iframe){ //for some reason I have to reset the frame height to zero otherwise it will retain the height from the last //click inside of the frame. You can set this to 0 or pick a good height so it only resizes when the content is larger than xx pixels var height = 780; var theFrame = window.frames[iframe.id]; //check your iframe.id to make sure you are getting back the correct id. theFrame.frameElement.height = height; //now lets get the height of the content and reset the height of the frame. height = parseInt(theFrame.document.body.scrollHeight); //now I have see this numerous times and many programmers try to set the frameElements.style.height attribute //that does not work in Safari, Chrome or FF so drop the style and you are good to go. theFrame.frameElement.height = height; } </SCRIPT>

IE8 is a little nicer for us programmers

 <SCRIPT LANGUAGE="JavaScript"> function resizeIframeToFitContent(iframe) { // This function resizes an IFrame object // to fit its content. // The IFrame tag must have a unique ID attribute. iframe.height = document.frames[iframe.id].document.body.scrollHeight;} </SCRIPT>

Here is an iframe script you can remove the background color and set your own width and URL.

 <IFRAME id="myiframe" name="myiframe" src="<your url>" width=800 style="background-color: #FAF9F8;" onload="resizeIframeToFitContent(this)" scrolling="no" frameborder="0">

This pretty much covers it.

+1
source

More articles:


All Articles