This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Resizing an iframe based on content
I'm loading an iFrame and want the parent to automatically change the height based upon the height of the iFrame's content.
To simply things, all pages belong to the same domain, so I shouldn't run into cross-site scripting issues.
On any other element, I would use the scrollHeight of the DOM object and set the height accordingly. I don't know if this would work on an iframe (because they're a bit kooky about everything) but it's certainly worth a try.
Edit: Having had a look around, the popular consensus is setting the height from within the iframe using the offsetHeight:
function setHeight() {
parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}
And attach that to run with the iframe-body's onLoad event.
Try:
jquery-iframe-auto-height
iframe-resizer
I just happened to come by your question and i have a solution. But its in jquery. Its too simple.
$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );
There you go!
Cheers! :)
Edit: If you have a Rich Text Editor based on the iframe method and not the div method and want it to expand every new line then this code will do the needful.
Here is a dead simple solution that works on every browser and with cross domains:
First, this works on the concept that if the html page containing the iframe is set to a height of 100% and the iframe is styled using css to have a height of 100%, then css will automatically size everything to fit.
Here is the code:
<head>
<style type="text/css">
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>
<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>
This solution worked best for me. It uses jQuery and the iframe's ".load" event.
In IE 5.5+, you can use the contentWindow property:
iframe.height = iframe.contentWindow.document.scrollHeight;
In Netscape 6 (assuming firefox as well), contentDocument property:
iframe.height = iframe.contentDocument.scrollHeight
I found the solution by #ShripadK most helpful, but it does not
work, if there is more than one iframe. My fix is:
function autoResizeIFrame() {
$('iframe').height(
function() {
return $(this).contents().find('body').height() + 20;
}
)
}
$('iframe').contents().find('body').css(
{"min-height": "100", "overflow" : "hidden"});
setTimeout(autoResizeIFrame, 2000);
setTimeout(autoResizeIFrame, 10000);
$('iframe').height($('iframe').contents().find('body').height() + 20) would set
the height of every frame to the same value, namely the height of the content of the first frame.
So I am using jquery's height() with a function instead of a value. That way the individual
heights are calculated
+ 20 is a hack to work around iframe scrollbar problems. The number must be bigger than the size of a scrollbar. The hack can probably
be avoided but disabling the scrollbars for the iframe.
I use setTimeout instead of setInterval(..., 1) to reduce CPU load in my case
My solution, (using jquery):
<iframe id="Iframe1" class="tabFrame" width="100%" height="100%" scrolling="no" src="http://samedomain" frameborder="0" >
</iframe>
<script type="text/javascript">
$(function () {
$('.tabFrame').load(function () {
var iframeContentWindow = this.contentWindow;
var height = iframeContentWindow.$(document).height();
this.style.height = height + 'px';
});
});
</script>
Oli has a solution that will work for me. For the record, the page inside my iFrame is rendered by javascript, so I'll need an infinitesimal delay before reporting back the offsetHeight. It looks like something along these lines:
$(document).ready(function(){
setTimeout(setHeight);
});
function setHeight() {
alert(document['body'].offsetHeight);
}
This is the easiest method i have found using prototype:
Main.html:
<html>
<head>
<script src="prototype.js"></script>
<script>
function init() {
var iframe = $(document.getElementById("iframe"));
var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content"));
var cy = iframe_content.getDimensions().height;
iframe.style.height = cy + "px";
}
</script>
</head>
<body onload="init()">
<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe>
<br>
this is the next line
</body>
</html>
content.html:
<html>
<head>
<script src="prototype.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="iframe_content" style="max-height:200px;">
Sub content<br>
Sub content<br>
...
...
...
</div>
</body>
</html>
This seems to work (so far) in all the major browsers.
My workaround is to set the iframe the height/width well over any anticipated source page size in CSS & the background property to transparent.
In the iframe set allow-transparency to true and scrolling to no.
The only thing visible will be whatever source file you use. It works in IE8, Firefox 3, & Safari.
Actually - Patrick's code sort of worked for me as well. The correct way to do it would be along the lines of this:
Note: there's a bit of jquery ahead:
if ($.browser.msie == false) {
var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
Related
I've googled a bit and there were a few leads, but I couldn't get any of those leads to work:
I have a page that has an iframe with the src pointing to an external page (cross domain). When the child/iframed page loads, it posts a message of its height. I put a console.log of the height in the javascript. If I open that page in a separate window (type the iframe's src URL in a separate tab, in other words), the console logs the expected height.
However, when I open the parent page with the iframe, the console logs either 0 or a very incorrect value of 150. I've looked through the css and html, and I don't have any specifications of 150.. Anyone have a clue what's going on here?
Abstracted code:
Parent HTML:
...
<iframe src="example.childpage.com" scrolling="no" frameBorder="0"></iframe>
...
Parent Javascript:
...
$(document).ready(function(){
window.addEventListener('message', function(m){
var messageData = m.data;
if(messageData.type=='document-loaded' &&
messageData.hasOwnProperty('height'){
resize_iframe(messageData.height); //function defined else where
//and works
};
});
...
IFrame Javascript:
...
$(document).ready(function(){
var body = document.body;
var html = document.documentElement;
var maxHeight = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
//Logs height correctly when opened in a separate window but not when
//iframed
console.log("POSTING HEIGHT", maxHeight);
window.parent.postMessage({'type':'document-loaded', 'height': maxHeight},
PARENT_HOST_URL); //PARENT_HOST_URL defined elsewhere
});
...
I realize I have a mixture of jquery and vanilla javascript here; I've done both $(document).height() and the Math.max() shown above to get the height, but both ways still have the same issue.
Much thanks!
ok I finally found a good solution:
$('iframe').load(function() {
this.style.height =
this.contentWindow.document.body.offsetHeight + 'px';
});
Because some browsers (older Safari and Opera) report onload completed before CSS renders you need to set a micro Timeout and blank out and reassign the iframe's src.
$('iframe').load(function() {
setTimeout(iResize, 50);
// Safari and Opera need a kick-start.
var iSource = document.getElementById('your-iframe-id').src;
document.getElementById('your-iframe-id').src = '';
document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
document.getElementById('your-iframe-id').style.height =
document.getElementById('your-iframe-
id').contentWindow.document.body.offsetHeight + 'px';
}
I had a function that looped through not-yet-accessible elements and called $(element).hide() on them -- which sets the style display: none.
Turns out calculating the height of an element is respective of its visibility on the actual page, regardless of it being in an iframe. So the browser couldn't see it, so the height was being miscalculated (still weird it was returning a random 150px value). That explains why it was calculating correctly on a separate page.
Instead of doing hide(), I just set the visibility to hidden and that fixed my issue of getting the incorrect heights.
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
I want to dynamically adjust the height of an iframe of a Shindig Gadget depending on content inside of it. After some research I found out that it is required such iframe src to have <!DOCTYPE ...> declared to get the height of the content inside iframe using the following:
document.getElementById("iframe").contentWindow.document.body.scrollHeight
But it is impossible to define a doctype inside <![CDATA[ of a Shinding module. What's the best way to achieve this?
You should use the adjustHeight API in order to do this. Calling the API without any arguments will adjust the iFrames height to fit it's contents.
http://opensocial-resources.googlecode.com/svn/spec/trunk/Core-Gadget.xml#gadgets.window.adjustHeight
Try this
Here is an working example click here
<script type="text/javascript">
function resizeIframe(obj)
{
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="http://www.yahoo.com" onload='javascript:resizeIframe(this);'></iframe>
</div>
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>
I would like to have an iframe take as much vertical space as it needs to display its content and not display a scrollbar. Is it at all possible ?
Are there any workarounds?
This should set the IFRAME height to its content's height:
<script type="text/javascript">
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
document.getElementById('the_iframe').height = the_height;
</script>
You may want to add scrolling="no" to your IFRAME to turn off the scrollbars.
edit: Oops, forgot to declare the_height.
The workaround is not to use <iframe> and preprocess code on server-side.
Also check out this thread: How does the DiggBar dynamically resize its iframe's height based on content not on their domain?.
It addresses the same question.
This CSS snippet should remove the vertical scrollbar:
body {
overflow-x: hidden;
overflow-y: hidden;
}
I'm not sure yet about having it take up as much vertical space as it needs, but I'll see if I can't figure it out.
Adding a DOCTYPE declaration to the IFRAME source document will help to calculate the correct value from the line
document.getElementById('the_iframe').contentWindow.document.body.scrollHeight
see W3C DOCTYPE for examples
I was having problems with both IE and FF as it was rendering the iframe document in 'quirks' mode, until I added the DOCTYPE.
FF/IE/Chrome support: The .scrollHeight doesnt work with Chrome so I have come up with a javascript example using jQuery to set all IFRAME heights on a page based on the iframes content. NOTE: This is for reference pages within the your current domain.
<script type="text/javascript">
$(document).ready(function(){
$('iframe').each(function(){
var context = $(this);
context.load(function(event){ // attach the onload event to the iframe
var body = $(this.contentWindow.document).find('body');
if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents
context.height($(body.get(0)).height() + 20);
} else {
context.hide(); // hide iframes with no contents
}
});
});
});
</script>