Develop Reference

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;

DIV above iframe

I want to place a "PLAY" div above each iframe. I want to do it automatically.
I manage to do that manually but I don't know how to do it with a script , or with css.
Here is my HTML markup :
<ul data-role="listview" id="resultat"></ul>
And my Javascript code :
$('#resultat').append('<li class="liste" ><iframe id="ytplayer" type="text/html" width="140" height="100" src="http://www.youtube.com/embed/RD98kNOBrNs?hd=1&rel=0&autohide=1&showinfo=0&wmode=opaque" frameborder="0"/></li>').listview("refresh");
I'm using z-index and position attributes to place my div manually above the iframe, but I don't think it's a good idea to do it automatically.
Thanks

In addition to Matyas his answer, I have altered his code a bit such that it is now fully implementable.
First, take a look at the demo before I will explain all the details:
SEE DEMO CODE HERE
As you can see, I 'soft coded' all the widths and the heights such that the overlayDiv is placed exactly in the middle of the iFrame.
You can change the width and the height of the overlayDiv to whatever you want and the script will automatically adjust the position of the start button.
What is very important is that you must have the following order in your HTML for this to work:
<div id="vidFrame" class="play">
<iframe id="video" class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/-PZLM-CmuJ0?wmode=opaque&hd=1&rel=0&autohide=1&showinfo=0&enablejsapi=1" frameborder="0"></iframe>
</div>
<div class="overlayDiv">
<img src="https://www.ameliaconcours.org/UploadedContent/Lamborghini%20Logo_Crest_4C_S.png" alt="facebook" width="90px" />
</div>
Where the width and height of vidFrame doesn't have to be established beforehand because it will become the height of the iFrame.
Also, mind the following details:
wmode=opaque is the first argument we give to the video (must be the absolute first)
we enable the enablejsapi=1 such that we gain control over playing (and pausing) the video
The jQuery that I use is the following:
$.fn.loadOverlay = function() {
$('iframe').each(function(idx, iframe){
var imageHeight = $('.overlayDiv').height();
var imageWidth = $('.overlayDiv').width();
var marginTop = $('#video').height();
var marginTop = marginTop/2-imageHeight/2;
var marginLeft = $('#video').width();
var marginLeft = marginLeft/2-imageWidth/2;
$('.overlayDiv')
.clone()
.appendTo('body')
.css({
top: marginTop,
left: marginLeft,
}).show();
});
}
Note that, eventhough it is lengthy, it explicitly calculates the middle of the iFrame. Hence, shorter methods are possible but this one will make you understand exactly what is happening.
Now another thing: yt players always have the ugly red play button in the middle of their iFrame when loading a video.
There is a little hack to make this button disappear, namely:
function onPlayerReady(event){
//THIS IS THE TRICK THAT YOU MIGH WANT TO REMOVE
player.playVideo();
player.pauseVideo();
}
So essentially we play and then immediately pause the video to make the button disappear.
But mind you: this wil not work on mobile devices. A very big advantage of this is that the video will automatically start buffering which is an advantage for the user.
Furthermore, the jsFiddle is self-explanatory so just read it through and try to understand it.
I hope this answers your question. Good luck!

$('iframe').each(function(idx, iframe){ // for each iframe
var $iframe = $(iframe); // take its jquery reference
$('.overlayDiv') // grab the overlay template you wish to place over each
.clone() // clone it
.appendTo('body') // add it to the end of your page
.css({ // resize and position the overlay
top: $iframe.offset().top, // to fit just above the iframe
left: $iframe.offset().left,
height: $iframe.height(),
width: $iframe.width(),
}).show(); // show the hidden (by CSS) overlay
});
Initially your .overlayDiv should have the following styles:
.overlayDiv {
position: absolute; /* so when we position by js it will be above the iframe*/
display: none; /* the master tempalte should be hidden */
z-index: 4953; /* make sure the overlay appears above other elements */
}
I haven't tested it out, Just written it from scratch while my build was running. But this is the idea I'd go with. You might have to tinker with the positioning.

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 scrolling position

I have an iframe with a like button from facebook and it's a bit small i want to scroll the iframe from the left for 15px;
Here is my code:
<iframe id='likebutton' frameBorder='0' allowTransparency='true' src='http://www.facebook.com/widgets/like.php?href="www.facebook.com/makestream"&layout=standard&show_faces=true&width=53&action=like&colorscheme=light&height=80' style='position:absolute;width:26px;height:23px;overflow:hidden;border:0;'></iframe>
is there anyway to do this with javascript ?

With javascript you can change CSS with code like this:
document.getElementById("likebutton").style.marginLeft="15px";
or with jQuery:
$("#likebutton").css("margin-left","15px");

Here is a code for scrolling in iframe:
document.getElementById('likebutton');
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(xcoord,ycoord);
}
Live example:
http://jsbin.com/ipujo/1/edit

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/