Develop Reference

iframe scrolling issue in ios

Our current scenario is a web page (created by us) displayed within an iframe in someone elses website. The iframe contains a kendo panelbar, and as you expand items, you can scroll further and further down the page as the height of the content increases. A button can be clicked to open a bootstrap modal, but if you are scrolled down the page then the modal appears at the top, sometimes completely out of view. You can see that it has opened because the background darkens slightly, as expected, but you have to scroll up the page in order to view the modal. It only seems to be a problem on ios, and does seem to happen in both safari and chrome. We have tested it on ios 10.3.3.
Here is a picture of the bug in action:
The iframe is as follows:
<iframe src="..." width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0">
I have tried manually scrolling the modal into view, but it doesn't seem to work as expected inside the iframe. The function I am using to try and scroll the modal into view is as follows:
(function ($) {
$.fn.scrollTo = function () {
$('html, body').animate({
scrollTop: $(this).offset().top + 'px'
}, 'normal');
return this; // for chaining...
}
})(jQuery);
This is triggered by the 'shown' event for the modal:
$("#contactUs_modal").on('shown.bs.modal', function (e) {
$("contactUs_modal").scrollTo();
$("#name").focus();
});
I have also tried scrollIntoView, scrollTop etc. with no luck, and $(window).scrollTop(0); scrolls the background to the top, not the modal.
Any suggestions would be much appreciated, I've pretty much run out of ideas.

It looks like a bootstrap modal scrolling issue rather than an iFrame issue.

Disable scroll in a iframe

I have my html page with a iframe, and when I put the mouse on the iframe and I use the mouse scroll button it will scroll the iframe page and I don't want that to happen. But I don't want the scroll to be totaly disable in this iframe because I have a fresque and I must be abble to zoom in with the scroll
How could I do ?
I have try to do scrollTo(0, 0); but it does it on the real page and not on the iframe.

You can try to use the mousewheel event to cancel the scroll.
Example code:
window.onload=function(){
setTimeout(function(){ //just to be sure that the document exists
document.onmousewheel=function(event){
event.preventDefault();
//add here your code to zoom
};
},300);
};
Notice that IE8 will always "internally" use event.preventDefault(); and the scroll won't work if you want to use a flag to enable/disable the scroll.
You can read more information here: http://www.quirksmode.org/dom/events/scroll.html
This is my old solution:
The question isn't specific enough, but I think I understood it.
Here is a piece of jQuery to fix what I understood:
(function($){
$(function(){
$(window).click(function(event){
if(event.which==3) //middle button
{
event.preventDefault();
//remaining code for the zoom(?)
}
});
});
})(jQuery);
This should disable using the scroll wheel to scroll the page (doesn't work on touch).
You can include the code for the zooming(?) inside the if block.
Include this code inside the iframe!

Try using the scrolling="no" option, as in
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>

Assuming: "I want to disable the scroll of the page without disabeling the scroll (in the iframe)"
First, this CSS will turn off scrollbars on the page ...
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
... and, this will disable scrolling anytime it is tried ...
$(window).scroll(function() {
scroll(0,0);
});
... although, this might be a better option ...
document.body.scroll = "no";
document.body.style.overflow = 'hidden';
document.height = window.innerHeight;

Grab iFrame Code dynamicly from a div

i have a div with unique id and inside of this i have a youtube iframe code.
I am trying to develop a sticky div and when the users scrolls down to fade out the default div that holds the youtube iframed video and move it to a this new sticky div and start play.
So far i am developing the code bellow:
Inside body:
<div id="newdiv" style="display:none;"></div>
<div id="currentplayer">
<iframe width="600" height="338"
src="//www.youtube.com/embed/avl5zgk3KH4?rel=0" frameborder="0" allowfullscreen>
</iframe>
</div>
The code so far for the sticky div is:
<script type="text/javascript">
$(function () {
$(window).scroll(function () {
var stickyHeaderTop = $('#currentplayer').offset().top;
if ($(window).scrollTop() > stickyHeaderTop) {
$('#currentplayer').hide();
$('#newdiv').css({
position: 'fixed',
top: '35px',
width: '310px'
});
$('#newdiv').fadeIn("fast");
} else {
$('#newdiv').fadeOut("fast");
$('#currentplayer').show();
}
});
});
</script>
So how is possible when the user scrolls up to move the current iframe inside the new div with id="newdiv" and resume play?
Thanks

using jQuery appendTo should do the trick ...
$( "#currentdiv iframe" ).appendTo( $( "#newdiv" ) );

You could use the jquery command .html to both get and set the html contents of a div.
However, I imagine that copying the iframe to a new div will mean the video will play from the beginning. If that is a problem, then you should try and achieve this by changing the currentplayer css instead. Perhaps have a div on the outside of currentplayer with a set height and use this to detect the position the user is on the page instead.
If that is not possible, then look into using the YouTube api, as you will then be able to access data like how much of the video has played and tell the second video area to start playing from this point.

iframe auto height based on content not resize when the page contain DOM

iframe auto height based on content not resize when the page contain DOM
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="http://site.com/page.php" frameborder="0" width="995" scrolling="no" marginheight="0" marginwidth="0" allowtransparency="true" onload="javascript:resizeIframe(this);"></iframe>
And it's work perfectly until i found this problem
One of the iframe site pages contain DOM to hide and show more of text
when the user click on it..it will show more text..but the iframe will not resize and will not show the full page
I need it to work correctly
Can anyone help please ?
Thank you

You need to detect that the DOM in the iFrame has changed and then recalc the size of your IE frame. The best way to do this is to use MutationObserver. However, that doesn't work in IE10 and below, so you have to use fallbacks.
Check out my little library that will look after all this for you.
https://github.com/davidjbradshaw/iframe-resizer

iframe on the page bottom: avoid automatic scroll of the page

I have an iframe from the middle to bottom on a page. When I load the page it scrolls to the bottom. I tried to body onload window.scroll(0,0) but it does an ugly effect because it first goes down and then immediately scrolls up.
What's the cause of this automatic scroll to bottom with iframe on the page?

This is just a random one, but possible doing something like this:
<iframe style="display: none;" onload="this.style.display='block';" src="..."></iframe>
The thinking being that if it is some focus stealing script on a remote page that you can't control, the browser won't focus a hidden element. And there's a good likelihood that your onload will fire after their focus changing script.
Or, one other option that might be a bit more reliable:
<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" src="..."></iframe>
Here we're basically saying hiding the frame and moving it to a negative offset on the page vertically. When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position.
Of course, without knowing more, it's hard to say for sure which tradeoffs are okay, and both of these options have conditions that are a tad racy, so YMMV.
I hope that helps :)

I came up with a "hack" that works well. Use this if you don't want your webpage to be scrolled to anywhere except the top:
// prevent scrollTo() from jumping to iframes
var originalScrollTo = window.scrollTo;
window.scrollTo = function scrollTo (x, y) {
if (y === 0) {
originalScrollTo.call(this, x, y);
}
}
If you want to disable autoscrolling completely, just redefine the function to a no-op:
window.scrollTo = function () {};

Similar method but using classes.. I added a class to the iFrame's parent div of "iframe_display" with a style inside that of visibility: hidden. On page load I then used jQuery to remove the class
.iframe_display{visibility:hidden}
$(function(){
$('#iframe_wrapper').removeClass('iframe_display');
});
This takes the focus away from the iFrame and stops the scrolling down to the iFrame on page load

Simple. Use about:blank in src like
<iframe id="idName" name="idName" src="about:blank" style="display:none"></iframe>

The src="about:blank" trick provided by Leandro & edited by Spokey worked for me, but I'd like to share a workaround I was using before.
A temporary solution I found was to embed the iframe in the uppermost element on my page (nav, header etc), so that even if the browser wants to jump to focus, it 'jumps' to the top element. This still can cause a slightly perceptible jump, which might bug you.
To make sure the iframe remains hidden if you choose to place it near the top of a page, I applied an inline style of style="visibility:hidden; height: 0px; width: 0px;". I guess you could also use a z-index combo.

This seems to work well:
<iframe src="http://iframe-source.com" onLoad="self.scrollTo(0,0)"></iframe>

This is the solution I came up with and tested in Chrome.
We have an iframe wrapped by a div element. To keep it short, I have removed the class names related to sizing the iframe. Here, the point is onMyFrameLoad function will be called when iframe is loaded completely.
<div class="...">
<iframe onload="onMyFrameLoad()" class="..." src="..."></iframe>
</div>
Then in your js file, you need this;
function noscroll() {
window.scrollTo(0, 0);
}
// add listener to disable scroll
window.addEventListener('scroll', noscroll);
function onMyFrameLoad() {
setTimeout(function () {
// Remove the scroll disabling listener (to enable scrolling again)
window.removeEventListener('scroll', noscroll);
}, 1000);
}
This way, all the scroll events become ineffective till iframe is loaded.
After iframe is loaded, we wait 1 sec to make sure all the scroll events (from iframe) are nullified/consumed.
This is not an ideal way to solve your problem if your iframe source is slow. Then you have to wait longer by increasing the waiting time in setTimeout function.
I got the initial concept from https://davidwells.io/snippets/disable-scrolling-with-javascript/