Develop Reference

how to scroll to top of the iframe

I'm using a different website(already active) into my webpage, but that website page is too big in height. So after restricting its height to 100vh (or some height). Scrolling down through the iframe is okay, but I need a floating 'scroll to top button' for iframe which will bring the iframe scroll to the top (NOT the parent window scroll).
I have used this code in .ts file of Angular, and it worked for the parent window scroll, but NOT for <iframe>
P.S - I'm using Angular 7
scrollToTop(){
window.scroll(0,0);
}
.html code
<button (click)="scrollToTop()">TOP</button>
Thank you in advance.
Update: I have tried the following suggested way
document.getElementById("myIframe").scroll(0,0);
I'm able to print the innerHtml, that means getElementById is working fine, the issue is with .scroll(0,0) Had tried .scrollTo(0,0) & .scrollBy(0,0) too but results the same

Just do the same but replace the window with the iframe element:
document.getElementById(<iFrameId>).scroll(0,0);

iframe height not downsizing after longer page content

Using the David Bradshaw iFrame Resizer code for dynamic iframes.
Initially, it works and set's the appropriate height of the iframe to the content.
But when the user clicks a link to go to another page within the iframe, the height doesn't downsize if the content is less. If the content is more, it'll upsize just fine.
I've tried using the various attributes for heightCalculationMethod, all the same results. I look into the content of the iframe of the smaller pages and what I'm seeing is an html table(that doesn't have a defined height) then a huge gap underneath inside the body tag(which also doesn't have a defined height).
What am I missing here?
Here is my script..
<script>
iFrameResize({
log:true,
enablePublicMethod:true,
heightCalculationMethod:'lowestElement'
});
</script>
Is it possible to just reset the iframe height?

Quoted from https://github.com/davidjbradshaw/iframe-resizer
IFrame not downsizing
The most likely cause of this problem is having set the height of an
element to be 100% of the page somewhere in your CSS. This is normally
on the html or body elements, but it could be on any element in the
page. This can sometimes be got around by using the taggedElement
height calculation method and added a data-iframe-height attribute to
the element that you want to define the bottom position of the page.
You may find it useful to use position: relative on this element to
define a bottom margin or allow space for a floating footer.
Not having a valid HTML document type in the iFrame can also sometimes
prevent downsizing. At it's most simplest this can be the following.

Setting heightCalculationMethod to 'bodyScroll' helped me in a same case:
go from a page inside iframe with iframeResizer.contentWindow.min.js placed to another page without this script.
I use iFrame Resizer v3.5.8

When to call Javascript for ScrollHeight

I have a page with an iframe. The two sites (parent site is php, child site is asp.net 2.0) are on different domains, although I control both of them. Most of the work is done within the iframe. I am using the postMessage function to send information about the total height of the content in the iframe. However, it always comes up as 0, I guess because the script executes before everything is laid out on the screen. Is there a way I can obtain the total height (I think it's scrollHeight, right?) of the child site so that I can send it to the parent?
Thanks!

so you want the parent to adjust the size of iFrame when you got o another page etc.. so suppose your using jquery as the JS lib you can try this trick. in the parent.html do this
$(document).bind('atriggerMessage', function(e) {
//do the iframe size change or other stuff
});
then within the iframe you need to trigger the event. so in the iframe.html
parent.$(parent.document).trigger("atriggerMessage");

I wanted to post my solution in case someone else comes across the same issue.
I ended up putting javascript code in the html markup almost right before the closing tag. This ensured that the page was visible before the body.scrollHeight was called. I don't understand why the body.scrollHeight inside window.onload() or body.onload or $(document).ready() as #shakirthow said above.

Trying to dynamically resize height of iframe that is pointing to a local PHP page

I've read through tons of posts and articles and haven't found a fix that works specifically for my problem
My parent page points via iframe to a local child page.
The child page is a php survey which changes height from page to page as the user clicks the next button. (Not really changing pages but re-populating content within one .php file)
I'm trying to have the parent page auto expand and contact height according to the length of the child page.
I have this specific need because I'm working within WordPress and want a PHP application (survey) to be wrapped within the design of the WordPress theme.
Ay help would be really appreciated!

Are the two pages on the same domain? If yes, then the easiest way to achieve this is with JavaScript running on both the parent and the child page.
Here's a rough idea of how it might work. On the child page:
...
<script>
function resizeFrame() {
// Call out to the parent iframe.
window.parent.resizeChild(document.body.clientHeight);
}
</script>
...
<body onload="resizeFrame()">
...
On the parent page:
<script>
function resizeChild(height) {
// Add the ID of the iframe element below.
document.getElementById(...).style.height = height + 'px';
}
</script>
You'll probably need to adjust the height, depending on the margins/borders/etc of the iframe element.
If the two pages are on different domains, this will be much harder. Cross-domain communication between iframes is difficult, particularly if you want to support older browsers.

Dynamically Resizing an Iframe

I can see that this question has been asked several times, but none of the proposed solutions seem to work for the site I am building, so I am reopening the thread. I am attempting to size an iframe based on the height of it's content. Both the page that contains the iframe and it's source page exist on the same domain.
I have tried the proposed solutions in each of the following threads:
Resize iframe height according to content height in it
Resizing an iframe based on content
I believe that the solutions above are not working because of when the reference to body.clientHeight is made, the browser has not actually determined the height of the document.
Here is the code I am using:
var ifmBlue = document.getElementById("ifmBlue");
ifmBlue.onload = resizeIframe;
function resizeIframe()
{
var ifmBlue = document.getElementById("ifmBluePill");
var ifmDiv = ifmBlue.contentDocument.getElementById("main");
var height = ifmDiv.clientHeight;
ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height || 500) + 5 + 'px';
}
If I debug the script using fire debug, the client height of the iframe.contentDocument's main div is 0. Additionally, body.offsetHieght, & body.scrollHeight are 0. However, after the script is finished running, if I inspect the DOM of the HTML iframe element (using fire debug) I can see that the body's clientHeight is 456 and the inner div's clientHeight is 742. This leads me to believe that these values are not yet set when iframe.onload is fired. So, per one of the threads above, I moved the code into the body.onload event handler of the iframe's source page. This solution also did not work.
Any help you can provide is much appreciated.
Thanks,
CJ

DynamicDrive has such a script, which I think does what you're asking for.
There's also a newer version now.
2011 update:
I would strongly recommend using AJAX over something like this, especially considering that a dynamically resizing iframe only works across the same domain.
Even so, it's a bit iffy, so if you absolutely must use AJAX over standard page loading, you really, really should use things like history.pushState (and have standard page loading as a fallback for browsers that don't support it). There's a jQuery plugin which handles this stuff for you, written by a GitHubber, called pjax, which they use only for repo navigation.

you moved the handler? maybe you should move the function to the inner frame as well, so that when you grab height values you reference the body directly rather than frame object... then call a parent.set height function
another trick, call function after settimeout of 10 msecs
i remember I had that problem once but I used IE's getBoundingClientRect() to get height of content, check mozilla developer center for something similar, this is just a hint, i did not research it
on another note, what is ifmBluePill? is it the iframe? or a div inside of it? why do you reference "contentDocument" of a div?

By the way, DynamicDrive improved their script to always resize even if the iframe contents change: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
From their page:
This is version II of the original
Iframe SSI script, which like the
original script lets you seamlessly
display external content on your page
via an IFRAME. It does this by
dynamically resizing the IFRAME to be
the height of the page contained
within it, eliminating any possible
IFRAME scrollbars from appearing while
snugly showing the entire external
content. Think of it as SSI (server
side includes) emulated using DHTML!
This script works in both IE5+ and
NS6+, and for other browsers, supports
the option to either completely hide
the iframe in question or display it
using its default height.
Now, this script differs from the
original in that you can load
additional documents* into the IFRAME
even after the page has loaded, and
the IFRAME will dynamically adjust its
height to fit the new document. So use
this script if you need to not only
display external content via the
IFRAME tag, but intend to change this
content after the page has loaded.