Change iframe height based on dynamic content inside [duplicate] - javascript

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Resizing an iframe based on content
I'm trying to load one of my pages into an iframe. I'm never sure how big the page will be, the data on the page is loaded dynamically. I'd like the iframe to always fit the page, no matter how big or small it is. Here's what I have:
function loadModal() {
myframe = $('<iframe id="mymodal" src="MyPage.aspx" width="700"></iframe>');
myframe.appendTo($('html'));
var height = document.getElementById('modalPreview').contentWindow
.document.body.scrollHeight;
$("#mymodal").attr("height", height);
}
I've been trying to get the height of the page after it's loaded. The problem is that height comes back as 0. But if I do this:
setTimeout(function () {
$("#mymodal").attr("height", height);
}, 2000);
the correct height is loaded. I assume it's because the data needs a few seconds to load. But this looks funky if the page loads really fast, or it will still give me a height of 0 if it takes more than 2 seconds to load the page.
So is there a way to:
Wait and set the height of the iframe once the data loads, or
Set the height of the parent iframe from MyPage.aspx?

If you're going to use option #2 you can access the parent window using the DOM and set the iframe height from the child.
$(document).ready(function() {
var iframeWin = parent.document.getElementById("yourIframeID");
iframeWin.height = document.body.scrollHeight;
});

You can hook an onload event to the Iframe before you insert it. When it fires, inspect the height of the document in the iframe and adjust its height accordingly.

Related

document ready gives wrong selector height

I want to get proper height of my div element, so in code i Use:
$(document).ready(function() {
var h = $('.myElement.active').outerHeight(true);
alert('height:'+h);
... // further more code to work with height
}
But this element contains lots of images and seems like I got my alert with height lower than it should be because images can't stretch size of that element so fast. If I request height after couple seconds it will fire alert with correct height.
Question: How to get height and run my code with checking is all images been loaded and transitions if there some is done?
Sincerely,
Vitaly.
$(document).ready gets triggered by the time the DOM tree was successfully built, similar to calling a script at the very end of the <body>. At that time, images might still be loading, which means the height cannot be calculated yet.
Once the whole document, including images, is loaded, window.onload will be triggered.
window.onload = function() {
var h = $('.myElement.active').outerHeight(true);
alert('height:'+h);
... // further more code to work with height
}
use window.onload this fires after images have been loaded
window.onload = function() {
var h = $('.myElement.active').outerHeight(true);
alert('height:'+h);
}

Getting the absolute size of iframe contents

I have an application in which I load an external website into an Iframe so people can QA it I need to find a way of getting the absolute size of the contents inside of the iframe so all the contents that are hidden because you havent scrolled down to that at the moment I can only seem to get the size of iframe just on the screen i.e. i have an iframe size of 800x600 and i can only get this value for some reason, but the website may be 800x1200 i need to be able to get that full size.
Currently i have this code
aWidth = document.getElementById('FrameStyle').scrollWidth - 17;
aHeight = document.getElementById('FrameStyle').scrollHeight + 500;
This is getting me the height but i have to manually add on pixels to the end which is not how i want and also the website may be longer than just 500 more pixels. So how can I go about getting the complete size of the iframes inner contents.
It looks like you can use Dot_NET Junior's suggestion if you run the code once the iframe contents have loaded, e.g.
var iframe = document.getElementById('iframeId');
iframe.onload = function () {
var width = iframe.contentDocument.body.scrollWidth;
var height = iframe.contentDocument.body.scrollHeight;
};

Resize iframe height according to resizable content

I have an iframe and I want to re-size the height according to the content which may resize if user makes certain actions.
I don't want a scroll bar so it appears as a normal page
Use a div instead of an iFrame. Try posting some sample code so we can help you more. Generally, you cannot resize an iframe based on its content.
scrollHeight is the major property to retrieve the height of the IFRAME's content like this:
contentWindow.document.body.scrollHeight
After the IFRAME is loaded, you can then change the height by doing the following:
<script type="text/javascript">
function resizeIframe() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
var cont = iFrameID.contentWindow.document.body || frame.contentDocument.body
// here you can make the height
iFrameID.height = cont.scrollHeight + "px";
}
}
</script>
On the IFRAME load event, you can call this function:
But sure..iframe should not be loaded from other website

iframe dynamic height resizing

Hi I currently have 2 pages (index.html and iframe_contents.html). Both are on the same domain.
I am currently trying to get the iframe to dynamically resize based on the contents size.
I was using this to assist me http://benalman.com/code/projects/jquery-resize/examples/resize/ and it works if the iframe_contents body tag gets larger or smaller on Firefox and IE 7/8/9 but for webkit it only can grow and can never shrink
I've narrowed it down to the body tag in iframe_contents.html not shrinking when content height changes but only in the iframe. When iframe_contents.html is not in a iframe if I shrink / enlarge elements the bodies overall height changes.
Is this a webkit specific issue?
After reading lots of answers here they all had the same issue with not resizing smaller when needed. I think most people are just doing a one-off resizing after the frame loads, so maybe don't care. I need to resize again anytime the window size changes. So for me, if they made the window narrow the iframe would get very tall, then when they make the window larger it should get shorter again. This wasn't happening on some browsers because the scrollHeight, clientHeight, jquery height() and any other height I could find with DOM inspectors (FireBug/Chrome Dev Tools) did not report the body or html height as being shorter after the iframe was made wider. Like the body had min-height 100% set or something.
For me the solution was to make the iframe 0 height, then check the scrollHeight, then set to that value. To avoid the scrollbar on my page jumping around, I set the height of the parent (that contains the iframe) to the iframe height to keep the total page size fixed while doing this.
I wish I had a cleaner sample, but here is the code I have:
$(element).parent().height($(element).height());
$(element).height(0);
$(element).height($(element).contents().height());
$(element).parent().height("");
element is my iframe.
The iframe has width: 100% style set and is inside a div with default styles (block).
Code is jquery, and sets the div height to the iframe height, then sets iframe to 0 height, then sets iframe to the contents height. If I remove the line that sets the iframe to 0 height, the iframe will get larger when needed, but never smaller.
This may not help you much but here is a function we have in what would be your iframe_contents.html page. It will attempt to resize the iframe in which it is loaded in a sort of self-resizing, cross-browserish, pure-JavaScript kind of way:
function makeMeFit() {
if (top.location == document.location) return; // if we're not in an iframe then don't do anything
if (!window.opera && !document.mimeType && document.all && document.getElementById) {
parent.document.getElementById('youriframeid').style.height = (this.document.body.offsetHeight + 30) + "px";
} else if (document.getElementById) {
parent.document.getElementById('youriframeid').style.height = (this.document.body.scrollHeight + 30) + "px"
}
}
You could put calls to it in a resize() event or following an event that changes the height of your page. The feature-testing in that method should separate out WebKit browsers and pick the correct height property.

javascript resize iframe height dynamically issue

I'm having an issue resizing an iframe to fit the content located within the frame'd page. I used a suggestion I found here to resize the frame dynamically.
In my frame'd pages I have
<body onload='parent.resizeIframe(getDocHeight())'>
function getDocHeight() {
var D = document;
alert(D.URL);
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
And in the page containing the iframe I have this
function resizeIframe(newHeight) {
var showsFrame = document.getElementById('frm');
showsFrame.style.height = parseInt(newHeight) +'px';
}
The function is getting called correctly by each frame'd page, but for some reason the 'newHeight' parameter being passed is keeping the largest height value. For example if I have 2 frame'd pages one with a scroll height of 300px and the other with 500px. When I first click my link to load the 300px page it works fine, but if I click the link to the 500px page and then try and come back to the 300px page, the value of 'newHeight' remains at 500. Any ideas? TIA
I found the issue I was having for anyone else that is experiencing the same thing. Because my frame'd pages didn't have much content the scrollHeight was reporting the length of the entire document and not cutting where my content stopped. Instead of trying to calculate scrollHeight, I simply looked for the offsetHeight which was the correct height I was looking for. Firebug is a nice tool to inspect the DOM of each page and see the values of each attribute without having to write debugging messages. I put this line in every frame'd page
<body onload='parent.resizeIframe(getDocHeight())'>
and in a separate js file I have this code to calculate the height.
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
);
Try it with JQuery
function resizeIframe(newHeight) {
$('#iframeId').attr('height',newHeight);
or
$("#frameId").height(newHeight);
}

Categories