What is wrong this way?:
HTML:
<iframe onload="scrollme(this)" src="somesite.com"></iframe>
Javascript:
function scrollme(ob) {
o.scrollTop = 100;
}
An iframe doesn't scroll. The viewport is always the size of the iframe, so there is no overflow that can scroll.
If you want the page inside the iframe to scroll, you have to make the document scroll. However that is only possible if the page shown in the iframe is from the same domain.
Related
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 know that trying to scroll the iframe itself in not the way to go and instead i should be scrolling the div. Thing is it doesn't work. What is wrong with this code? Is it a google thing? I'm using the custom search so it shows up in the frame but I know google and frames don't like to play with each other.
HTML
<div id="googleframe"><iframe id="googleseo" src="http://www.google.com/custom?q=hey+there&btnG=Search"></iframe></div>
JS
var seoFrame = document.getElementById('googleseo');
seoFrame.src = googleSearch;
seoFrame.onload = function () {
document.getElementById('googleframe').scrollTop = 300;
}
}
It was a CSS issue. The iframe wasn't long enough to scroll. It was the same height as my div so I made it longer and it works perfectly.
This is due to the scrollTop referencing the iframe, not the body within the frame. The iframe itself doesn't have a scrollbar, it's the document within it.
Fiddle of it working http://jsfiddle.net/ebzxzgmo/
var seoFrame = document.getElementById('googleseo');
var elem = (seoFrame.contentDocument||seoFrame.contentWindow.document).documentElement;
elem.getElementsByTagName('body')[0].scrollTop = 300;
Notice that it's requesting jsfiddle. Browsers block accessing the DOM of iframes from other domains.
Reference for scrolling cross domain: Scroll a cross-domain child iframe?
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
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.
I have a page that loads another page(url) onto it. The problem is that the iframe page does not fit well in the outer page. How can I reduce the size of the iframe page having the content of the iframe page intact? I do not wish to have scroll bars.
Unfortunately you can't really scale an iframe so that its contents change their size. To the browser, the iframe is a window onto another rendering context which has its own layout according to its own CSS. You are at the mercy of how the content inside the iframe is laid out.
If the iframe URL is from a different site and you can't modify it, then you can't really do anything.
If you can modify the page that's displayed within the iframe, well I'd assume you wouldn't be asking.
See the answer here ( How can I scale the content of an iframe? ). I'm using it and it works on FF, Chrome a little flakey.
You could try expanding the width/height of the iframe and checking the clientWidth vs iframe width. If they're equal, there's no scrollbar, otherwise there is.
Use a midpoint approach for efficiency. In sudo-code:
dx = iframe.width;
while (dx > 1) {
previous = iframe.width
if( iframe.width - iframe.clientWidth > 0 ) {
iframe.width += dx*2;
} else {
iframe.width -= dx/2;
}
dx = Math.abs(previous-iframe.width)
}