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);

Hide an Element inside of an Iframe

I'm trying to hide a header inside of an iframe, but for some reason, it is not working. Can someone look at my code and help me figure out why the header is still visible? Thanks.
<iframe id="booking_iframe" src="https://bananahostels.com/booking-engine/cacao-hostel" width="100%" height="1500px" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
$('#booking_iframe').load(function() {
$('#booking_iframe').contents().find('.hostel-branding').hide();
}

Measure the height of the header using the tools provided in FF developer edition, Chrome probably has a similar function.
Namely right click > inspect element > small ruler icon in the top right.
then wrap your Iframe inside of another div which has overflow:hidden; specified in your css, Then all you need to do is on the Iframe set your Css value transform:translateX(-theHeightOftheHeader.);
Maybe a bit hacky, but since this is an external URL that would seem to be your best option.

HTML Object element and scrollbar issue

I am using the following HTML to embed HTML from an external URL into my site and it works great:
<object data="https://myapp.com/explore" width="100%" height="100%" type="text/html" style="overflow: hidden;">
<embed src="https://myapp.com/explore" width="100%" height="100%;" />
Error: Embedded data could not be displayed.
</object>
On the page, a vertical scroll bar is shown, which is the correct behavior I expect, as content is larger than the height of the Chrome browser window.
However, when I click the vertical scroll bar for the first time, the page scrolls... After that, without clicking, the page scrolls whenever the mouse is over the vertical scroll bar, WITHOUT me actually clicking to scroll.
Has anyone seen this, and can you suggest how to solve? It's a weird behavior I have not seen before...

I have tried your object + embed approach, and encountered the same problem with the scrollbar. The Chrome browser seems to not trigger the mousedown on the scrollbar, but does fire the mouseup, which looks like a bug. Why not try an iframe? It works as you expect, I think:
<iframe id="exploreIFrame" src="http://myapp.com/explore"
width="100%" height="100%" style="border: none;"
></iframe>
To make it span the entire window, set these styles:
<style type="text/css">
body { margin: 0; }
#exploreIFrame { position: fixed; }
</style>

It would be better to use an iframe instead of an embed.
iframe:
The iframe element represents a nested browsing context. The HTML 5 Standard describes "The element" as primarily used to include resources from other domains or subdomains, but can be used to include content from the same domain as well. The iframe's strength is that the embedded code is 'live' and can communicate with the parent document.
embed:
Standardized in HTML 5, but before that, it was a non standard tag, which admittedly, was implemented by all major browsers. Behavior prior to HTML 5 can vary...
The embed element provides an integration point for an external (typically non-HTML) application or interactive content. The HTML 5 Standard describes "The element" as used to embed content for browser plugins. Exceptions to this are SVG and HTML, which are handled differently according to the standard.
The details of what can and cannot be done with the embedded content is up to the browser plugin in question. But for SVG, you can access the embedded SVG document from the parent with something like:
svg = document.getElementById("parent_id").getSVGDocument();
From inside an embedded SVG or HTML document, you can reach the parent with:
parent = window.parent.document;
For embedded HTML, there is no way to get at the embedded document from the parent (that I have found).

Try using the max-height property in pixels, and use the overflow property to scroll...
object_classname{
max-height: 600px; //as you like
overflow-y: scroll;
}

Couldbe hardware related. If you have a button/wheel on the mouse that you are clicking when you select the scrollbar. IT sounds like a problemI experienced with amouse that had an extra button on a scroll wheel.

Dynamically Resize iFrame which has dynamic content with jQuery or Javascript

I have an iFrame loaded like this:
<iframe src="http://otherdomain.com/sourceContent.html" id="theIframe" frameborder="0" seamless>
I need to resize it dynamically so there are never any scrollbars, the content inside can get taller vertically (dynamically based on what the user clicks on).
I know you can resize the iframe dynamically on page load, but what about if the contents of the iFrame grow?
Also the source HTML is on a different domain.

Add this to your section
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe src="http://otherdomain.com/sourceContent.html" id="theIframe" frameborder="0" scrolling="no" seamless onload='javascript:resizeIframe(this);'>

If you are talking about sizing it dynamically based on something that might change in the iframe after load this can be tricky. If the iframe is controlled by you or is from the same domain it will be easier, otherwise it might not be consistently possible depending on the browser and site being loaded.
iframes create security sandboxes of sorts so that the pages cannot communicate one with another except through Post Message (or if they are from the same domain, it can be possible through plain javascript.)
Some code inside the frame would need to message to the outer window and it would have to be resized that way. If you control both then you only need JavaScript similar to the kind posted in #Sujit 's answer

Allow click to pass through iFrame to content behind it

The closest thing I can find to what I'm trying to do on SO is this, but sounds like this is not a workable solution anymore and it is not specific to iFrames anyway:
Click through a DIV to underlying elements
Basically I have a DIV that gets added to a page that contains an iFrame. The iFrame contents can be minimized so they don't always take up all the space of the iFrame. The iFrame is transparent so that you can still see the web page behind it. I need to be able to click on the elements in the web page behind it, but have had no luck so far.
They have a roughly 400x400 iFrame but when the contents in it are minimized, you can still click on the web page behind it. I tried doing something similar but can't get it to work.
Even in the transparent regions I cannot click on the page behind it. I also tried using pointer-events:none as mentioned in other posts but this does not help. It only disables the elements in the iFrame but has no affect on being able to click through it.
Do anyone know how to achieve this? A way to have a larger iFrame, where the contents in it can be minimized and you can still click on what's behind the iFrame?
UPDATE:
It would appear that this is not possible when using frames.

Have you tried pointer-events: none?
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

Strategy 1: iFrame Resizer
If you're able to get scripts into both the host page and the page contained within the iFrame, you can use Bradshaw's iFrame Resizer JS.
It will dynamically resize your iFrame to fit its content. Works cross-domain.
The use cases for it include:
You are authoring both the host page, and the iFrame page.
You are authoring either the host page or the iFrame page, and are collaborating with the author of the other page.
I can't tell if your use case meets either of those criteria.
Strategy 2: Overlapping iFrames
Using JQuery, you can toggle the visibility of 2 (or n) iFrames which overlap completely or partially. You can load each iFrame with the same content, or different content. When any iFrame is invisible, you can click through it to the content behind it, whether that's another iFrame, or anything else.
In your application, you would be sizing the 2 iFrames differently: iFrame1="full size", iFrame2="minimized."
In my application (below), the 2 iFrames mostly overlap and have the same content, but I was padding them differently and shifting their position slightly, depending on whether something else on the page was present or absent. I'm also resizing both iFrames dynamically to fit their content using iFrame Resizer (above), but that might not be required for your application.
I recommend using different border colors for your iFrames (below), while you fiddle with their position and size.
I only learned JS like, 5 mins ago, so, my apologies if I've misunderstood your question.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
// This is the Bradshaw resizer script. Required iff you need dynamic resizing.
<script src="[https://MyiFramehost.com/web/embed/js/inline.js]"/></script>
<div id="padded" style="width:100%" >
<iframe id="oos_inline" style="border:solid;border-color:green;width:100%;position:relative;padding:65px 0px 0px 0px;top:-65px;"></iframe>
</div>
<div id="normal"style="width:100%;" >
<iframe id="oos_inline_padded" style="border:solid;border-color:blue;width:100%;position:relative;padding:0px 0px 0px 0px;"></iframe>
</div>
<script>
var iframe_padded = document.getElementById("oos_inline_padded");
var iframe = document.getElementById("oos_inline");
if(document.getElementById("home-page")!=null){
iframe.src = "https://the_embedded_site.com";
$(iframe).show();
$(iframe_padded).hide();
} else {
iframe_padded.src = "https://the_embedded_site.com";
$(iframe).hide();
$(iframe_padded).show();
}
// This starts dynamic resizing. Required iff you need dynamic resizing.
iFrameResize({log:true})
</script>

I think you missed:
myDiv.style.opacity = "0";
myDiv.style.filter = "alpha(opacity=0)"; /* For IE8 and earlier */
BTW, use a CSS class instead of applying CSS via JS. Let me know how it goes.