When embedding a url into iframe how do you set the height equal to the height of the web page? Current code is this <iframesrc="http://tutsplus.com/course/30-days-to-learn-html-and-css/"width=1100height=5000onLoad="window.parent.scroll(0,0);"></iframe> See the problem when you scroll down to the bottom of this page.
Are you wanting the iframe to be the height of the page it is embedded within or the height of the page being displayed within the iframe?
Hey Josh - the height of the image being displayed in the frame. Any help would be greatly appreciated!! Thanks
Tough, that is depening on Screen Resolution too, but i found a good solution for you! Please follow this steps: 1. Add this code, to your <head></head> Section: <script type="text/javascript"> function autoIframe(frameId) { try{ frame = document.getElementById(frameId); innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document; objToResize = (frame.style) ? frame.style : frame; objToResize.height = innerDoc.body.scrollHeight + 10+'px'; } catch(err){ window.status = err.message; } } </script> 2. In Body Tag: Please add this: onload="autoIframe('myiframe');" 3. <iframe src="......tutsplus.com/course/30-days-to-learn-html-and-css/" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" width="100%" height="620" style="min-height:100%"></iframe> I am sure that Will do a Great a Job for you!
Hey tried to implement this code - however the iFrame now simply has a height of 620, not the height of the page Thanks
Let me explain, i tried hard to find a way, but i think no good options are available! So if we take this a Globally, People use Laptop most off, or you can say people use 1368x786 something resolution, or 1368x6**, so in that way make this in full width screen and make this in height as per your screen height, Also if you give height more then screen height, then it will show 2 Scroll Bars, so better to use a good height option! And it will be good to go! Thanks
Well. This has to be achieved by first finding the scroll height of the page being loaded in, then applying it using Javascript to the iframe. Only problem is it looks like you are trying to load in a page that is NOT on your own domain... so it's not going to work. You are locked out of getting that info cross-site. If you were loading in a page that is on the same domain, you'd be all good and would do it like this: <body onload="setHeight();"> <script type='text/javascript'> function setHeight() { parent.document.getElementById('awesome-iframe').height = document['body'].scrollHeight; } </script> <iframe src="iframe.html" class="iframe" scrolling="no" frameborder="0" id="awesome-iframe"></iframe> </body> HTML:
Hey, I am having a similar issue! I have a google forms sheet that is long, when submit is pressed the confirmation is at the top. I found this forum and tried to use the code, but it hasn't worked. Am I doing something wrong? Here is the code (actual src form edited to keep anonymity): <iframe src="https://docs.google.com/forms/d/1xTjBmneSEL_i4mfPjeP0S6NoP0lIOaP1sySWZ7M/viewform?embedded=true" width="600" height="2100" frameborder="0" marginheight="0" marginwidth="0"onload="window.parent.scroll(0,0)>"</iframe> Summary: I need page to scroll to top after pressing submit so that ppl can see the confirmation, the onload thing I think I am putting in wrong! Thanks!