We Keep Coding

iframe auto height without scroll doesn't work

I have a page that contains an iframe. I have tried to remove the scroll with the attribute scrolling=no and scroll='no' but without result.
So I want it to be able to adjust its height according to the contents inside it, without using scroll.
Here is my code:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="" frameborder="0" onload="resizeIframe(this)" scrolling="no > </iframe>

I dont fully understand what you are trying to accomplish here and I presume the Iframe doesnt provide an API to handle this for you.
No scrolling:
Its a workaround but: fix this by wrapping the Iframe with a div, putting it on top of it with z-index. The cursor will not access the Iframe like this. Also want to be able to click it? Add an onclick function removing the diff or the css of the div.
Altering the height:
Just dont specify height and width and the IFrame will handle this for you?
About the code:
Im not familiar with the onload function but presuming it runs after the loading of the Iframe...
obj.style.height
should be
obj.height

Dynamically Shrinking Size of An iFrame Window

I have an iFrame window on the page, the content inside of the iFrame ether shrinks or grows larger in height depending of different AJAX calls.
I want to dynamically re-size height of an iframe window based on the height of iframe's content
My code:
var $iFrame = $('#iFrameWindow');
var lastHeight;
setInterval(function () {
if ($iFrame.contents().height() != lastHeight) {
$iFrame.css({
height: $iFrame.contents().height() + 'px'
});
lastHeight = $iFrame.contents().height();
}
}, 200);
It works if iFrame's content grows larger then my iFrame window automatically gets re-sized to a larger height, but if iFrame's content shrinks in height $iFrame.contents().height() does not detect that change and shows old, larger and incorrect height for the iFrame's content.
How do I also make my iFrame to dynamically shrink if height if the iFrame changes to smaller height?

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 height [dynamic] for every 2 second

my problem is when I load iframe it's set height of iframe correctly and also when data(content) load in iframe it;s automatically set height ,BUT when page load in iframe and set height relatively page content and then if I reduce or delete content from loaded page it will not reduce iframe height.(e.g when page load first time height set 100px and dynamically load data on page iframe height set to 150px and when I reduce data it's not set height of iframe it remain 150px). This is my code:
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
setInterval("setIframeHeight_id('" + iframe.id + "')", 2000);
}
return false;
}
function setIframeHeight_id(iframeid) {
var iframe = document.getElementById(iframeid);
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
return false;
}
function resizeIframe(nm) {
setIframeHeight(document.getElementById(nm));
}
HTML
<iframe id="IframeData" scrolling="no" frameborder="0" width="100%" onload="resizeIframe('IframeData')" allowtransparency="true"></iframe>

I would highly suggest you to use jQuery instead of plain JavaScript. It won't do a miracle by itself, but will sure help you shorten your code.
When it comes to your problem, why not using percentage sizes instead of fixed pixel size? Let's say your iframe's height is set to 100%, instead of 150px. By doing this way, next time you resize the parent container, the iframe itself will stretch to parent's height.
I hope this helps.

Set iframe height to that of internal content (on same domain)

I have an iframe embedded within my page - it's just part of my page, not the whole thing. I am reloading the iframe dynamically and want it to resize according to the height of the content within it.
The content is on the same domain, so (hopefully?) no need for a solution as complex as that given in Resizing an iframe based on content.
This is the code I'm using to resize it, but it isn't working. The frame reloads OK, but the height always stays the same. Can anyone advise?
I've also tried the top solution in How to autosize an iframe without any luck.
I think it could be because the page inside the iframe takes a while to load, so it hasn't finished loading by the time the height is set. Maybe.
<iframe frameborder=0 border=0 src="" width="100%" height="400px" name="commentframe" id="commentframe"></iframe>
function reload_frame(uid) {
document.getElementById('commentframe').src = "comments.html?" + uid;
document.getElementById('commentframe').height = document.getElementById('commentframe').contentWindow.document.body.scrollHeight + "px";
}
Update:
Trying, with no luck:
<iframe frameborder=0 border=0 src="" width="100%" height="400px" name="commentframe" id="commentframe" onload="reload_frame()"></iframe>
function reload_frame() {
var commentframe = document.getElementById('commentframe');
commentframe.style.height = (commentframe.scrollHeight + 10).toString() + "px";
}
It does resize the iframe, but only to +10px of its original height - if the content is longer than this, it is still hidden.
Maybe I need an onload event inside the body of the iframe itself?

<script type="text/javascript">
function ajustHeight() {
$("#myIframe").parent()[0].style.height = ($("#myIframe")[0].scrollHeight + 150).toString() + "px";
}
</script>
<iframe id="myIframe" src="mypage.html" width="100%" height="100%" onload="ajustHeight()"></iframe>

In modern browsers and with many doctypes, scrollHeight will return the iframe height calculated by the browser and not the content height, so above snippets won't work in most cases.
You can set the iframe to the content height using the following snippet.
JS:
$('#ifm').load(function() {
$(this).height( $(this)[0].contentWindow.document.body.scrollHeight + 24);
});
HTML:
<iframe id="ifm src="..."></iframe>
Please note that this will work only if the iframe URL is on the exact same domain of the page containing the iframe itself.

without jquery:
<script type="text/javascript">
window.onload = function() {
var iframe = document.getElementById("blogFrame");
iframe.parentNode.style.height = iframe.scrollHeight + "px";
}
</script>