Develop Reference

How can I scroll inside an iframe, if the iframe has no scrollbars?

Does anybody now a solution for the following or at least know, where to find the documentation of this restriction?
I have a html page (the parent) including an iframe (child) without an libraries, just pure javascript and html. It does not matter if both are on the same domain or not. When I add an iframe with a height of 400px to my parent page and the child page inside the iframe is higher, it shows a scrollbar for the iframe. Inside my child page I add a button, which scrolls to position top: 100, left: 0 onclick, which means, that the iframe content is scrolled to its stop. This is working.
When I add an iframe with the height of 2200px, which is higher that the child iframe content and thus there is no scrollbar, this click event is not scrolling anymore.
The practical part:
What I want to solve is, that I have a parent page with a seamless integrated iframe. the iframe has much content, including forms. On smaller displays you have to scroll a bit, fill out the forms, scroll further and confirm a terms button. This validates the form fields and if a form is invalid, I want the iframe content to scroll to its position of the first invalid input fiel, if it is not in the current viewport
I tested it with current Firefox 109.
This is not a same domain issue, the actual logic works when not inside the iframe.
example parent code:
<h2>IFrame Resizing Testpage parent</h2>
<iframe src="scrolling-page.html" width="100%" height="400px" style="border:2px solid green;"></iframe>
<hr>
<iframe src="scrolling-page.html" width="100%" height="2200px" id="iframe-scrolling" style="border:2px solid red;"></iframe>
Example code of the child page:
<h2>IFrame Resizing Testpage</h2>
<div style="height: 2000px"></div>
<h2>IFrame Resizing Testpage End</h2>
<button id="scroll" type="button">scroll</button>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById('scroll').addEventListener('click', (event) => {
console.log('test');
window.scrollTo(100, 0);
})
});
</script>

Cross domain iframe resize fix without vertical scrollbar

I have a website where I show information inside an iframe. And the information inside the iframe comes form Salesforce domain. The data that is being fetched comes in the form of a "training guide" with several pages in it.
I have added the javascript code on both the domains for fixing the changing height thus removing the Vertical scrollbar. Code in salesforce page:
function retrieveInfo(){
parent.postMessage(document.body.scrollHeight, '*');
}
function showLoading(){
$('#dvLoading').show();
}
Code written in my website page is :
function resizeCrossDomainIframe(id, other_domain) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
var height = parseInt(event.data); // add some extra height to avoid scrollbar
iframe.height = height + "px";
}, false);
}
and my iframe in the page is :
<iframe id="my_iframe" src="https://cp.secure.force.com/mydomainhome" width="100%" onload="resizeCrossDomainIframe('my_iframe', 'https://cp.secure.force.com/');" scrolling="yes"></iframe>
The data inside the iframe has a left pane and a right pane. Left pane contains a list of collapsable menu that shows respective course contents. The left pane manu expands on clicking.The issue that I am getting is that the javascript code for removing V-scroll is getting called on page load but once the page loads and I click on the left pane to expand it the v-scroll reappears.
This is how the page renders on page load:
This is how the page renders after I expand the left pane menus with inner scrollbar:
Is there a way I can prevent the Vertical scrollbar appear even after expanding the left pane menu. I do not want to reload the page on clicking on each of the left pane menu links though.

Would triggering the retrieveInfo on each window.resize event solve the issue?
By expanding the left menu, you are basically resizing the window of the iframe. If you repost your message, your iframe in the parent window will re-adjust accordingly.
I once solved this issue with an external library such as Iframe resizer (https://github.com/davidjbradshaw/iframe-resizer)
That might help you for browsers not supporting "postMessage".

Bootstrap responsive inside iFrame

We have a site built with Angular/bootstrap.
This site should be configured inside of an Iframe of another domain.
my doubt is Should i write a resize script to properly scroll inside iFrame or since my app is designed using Bootstrap will it auomatically behave responsive according to parent domain iFrame size.

Bootstrap will take care of the responsiveness itself, but the only condition is, you follow the row and column structure properly.

It depends whether you want the iframe to be a fixed height and have a vertical scrollbar or if you want the iframe to have a height that changes dynamically with your embedded page.
If it's the former you don't need to do anything, Bootstrap has the widths covered.
If you want the iframe height to change depending on the height of your embedded page (which will change with the responsive design), you need JS to resize the iframe.
For example
var iframeResize = function() {
var iFrameID = document.getElementById('myIframe');
if(iFrameID) {
iFrameID.height = iFrameID.contentWindow.document.body.offsetHeight + "px";
}
}
$(function() {
$(window).resize(iframeResize);
});

Allowing iframe overflow on mobile devices

I have to display a 3rd party link (cross-domain) on a webpage that is displayed on tablets and phones.
The 3rd party has decided to display a modal window, vertically centered on initial page load.
The problem I am running into is that the phones (iOS 5 mobile Safari, in particular) automatically resize iframe to fit the content, causing the modal window to be rendered off the bottom of the screen, due to it being many, many pixels tall.
I have tried everything I can think of to get the iframe to just display in a fixed size, but nothing works.
Adding height attribute or styles is ignored, even with !important
Wrapping the iframe in a div with -webkit-overflow-scrolling: touch; seems to work, but in this situation, still results in the iframe expanding and, thus, displaying the modal window off-screen.
Adding scrolling="no" allows the iframe to be displayed in a fixed size, but I can't get the iframe to scroll now.
I'm wondering if there are any alternatives to iframe or if there is anything I can do to get an iframe to properly display with a fixed size.
Oh, and I must mention, I cannot simply open the 3rd party link in a new window/tab, since this webpage is baked into an app, which I have no control over.
<!doctype html>
<html>
<head>
<title>Test</title>
<style>
iframe
{
height: 100px !important;
}
</style>
</head>
<body>
<iframe style="height:100px;" height="100" src="http://dump.mrslayer.com/test2.html"></iframe>
<script>
setTimeout( function( ) {
var iframe = document.getElementsByTagName( 'iframe' )[0];
iframe.style.height = "100px";
iframe.height = 100;
}, 1000 );
</script>
</body>
</html>

You could use PHP, but this prints the entire document contents inline with your document.
<?php
echo file_get_contents("http://dump.mrslayer.com/test2.html");
?>
If it's an issue, you can use regex or something like that to remove everything before the <body> tag and after the </body> tag after you have the file_get_contents().
You can include this function in a <div>, which should be easier to control with CSS. This is the easiest alternative to an iframe I can think of.

Scrollbar to Top of iFrame Container Div on Each Page Load?

I have an iframe with external content that is scrolled from a parent div (the iframe has a large height, while the iframe container div has a smaller height).
As a result, when I scroll to the bottom, the scrollbar stays there when I load another page into the iframe.
Is there any way to send the container scrollbar to the top whenever the iframe loads another page?
Thank you.

I guess this was relatively simple, but it wasn't working for me when I had the javascript in an external file. So I put it into the HTML file:
<script language="javascript">
function gotop()
{
document.getElementById('iframeContainer').scrollTop = 0;
}
</script>
<iframe src="http://whatever.com" onload="gotop()"></iframe>