I'm trying to know when an user clicks on an iframe with external content (a page not owned by me). The reason I need to do it is that my site relies heavily on keyboard navigation and when the iframe is focused I need to tell users to click outside to keep playing.
I'm using a transparent div on on top of the iframe with an onmousedown event. But it's not a great choice since the user needs to click once for the div to disappear and once again to click wherever they want on the iframe.
Are there are other ways to know when the user clicks on the iframe?
Thanks
The closest I can think of is to listen for blur on your window.
http://www.quirksmode.org/dom/events/blurfocus.html
I would put an onmousedown event on the iframe instead of the div?
you could find a way around this problem. But personally, I don't think its a good practice to capture events in an IFrame from an External Container.
Related
Is it possible to use the parent scroll when I start the scroll from the embedded iframe? Currently I'm using pointer-event: none but the embedded iframe prevents clickable events. I tried also manipulate other events like touchmove but I failed. Feel free to answer and thank you in advance!
It's not possible to scroll the parent page from an iframe. However, you could consider using embed instead of iframe. This will give you more control over how scroll works.
On my page I have iframe that contains some divs with scrollbars:
http://jsfiddle.net/gdx6L940/
The iframe's content is from another domain, so I do not have access to its content via DOM.
How can I block mouse-wheel scrolling of the iframe and its content? What I want to achieve is that mouse-wheel scroll will always scroll the parent page, even if the cursor is over the iframe.
EDIT
I made a little bit more real-world example:
http://jsfiddle.net/gdx6L940/2/
I want to prevent the inner iframe's divs (facebok feed) from scrolling with mouse wheel.
EDIT
To make sure: I do not want to disable scrollbars on IFRAME element nor block all events completely. I would like to block only mouse-scrolls, but preserving the ability to click
I believe that you can simply set another div element over the existing one and then put the transparency of that at 100%. that may not be the correct way of achieving your goal but it should work. I'll test it and make edits if necessary
I think I got to do partially what you want
use the code to prevent the browser from scrolling inside the div (that is inside you iframe)
window.addWheelListener(div_el, function(e) {
console.log(e.deltaY);
e.preventDefault();
})
the working example and addWheelListener code is in my jsfiddle here
You can catch mousewheel event
iframe.contentWindow.document.onmousewheel=function(event){
event.preventDefault();
};
Just did some more research and it would appear that what you are trying to do is just not possible to do the way you want to do it.
also possible duplicate of
HTML iframe - disable scroll
I'm using a Javascript scroller class on a site that seamlessly takes care of adding a scrollbar to all predefined elements on the page that have overflown content. The client has recently asked that one of these elements contain an iframe so they can easily add interactive content to this area. (I know I know, iframes, but I'm a subcontractor on this job. Not much pull.) Fortunately the content of the iFram is being pulled from the same domain, so I'm able to resize the iframe once the content loads, in turn firing the Javascript scrollbar. In the end it works beautifully—in Chrome.
In Explorer and Firefox the iframe seems to be stealing mouse events as soon as the mouse is over the iframe. So the mousewheel event no longer works. You can still drag the scroll handle to scroll, or click anywhere on the scroll track, but using the mousewheel does nothing. It doesn't even fire the event.
I've seen that others have had similar issues, but haven't found a workaround. Anyone have any suggestions?
Here's the Scroll class for good measure: http://hastebin.com/xisidogiju.coffee
Appreciate any help I can get!
Mouse events are tied to windows, iframes are windows. Its a miracle this works in webkit browsers as you say.
You need to pass the eventListener and perhaps eventHandler between your parent window and the iframes when the mouse moves into them.
Some reference about passing objects between iframes: http://www.dyn-web.com/tutorials/iframes/refs.php.
I could just manage to overcome this problem. You can check the solution mentioned in the jsfiddle mentioned below.
http://jsfiddle.net/6nnMV/358/
Here, I have created a event to listen to the mouse scroll and have binded the event to the iframe.
You can then scroll the parent window or element by using the scrollTop property like
$(element).scrollTop($(element).scrollTop+(number of pixels));
This will only work when the iframe you are accessing is in the same domain.
I'm hoping you can help!
I am using this plugin http://manos.malihu.gr/jquery-custom-content-scroller which works great. The problem I am finding is that I am embedding youtube/vimeo clips (iFrames) within the scoller, which works fine, except for the fact that the mousewheel scroll doesn't work when the mouse is over the iFrame.
I suppose the javascript scroll event isn't being fired because the browser thinks I am trying to scroll within the iFrame? Is there any way around this? Hope I have explained this well... Basically I want to scroll down the scroller whether the mouse is over an iFrame or not, but still be able to click on them.
To resolve this issue, define a mousewheel event handler inside your iframe.
<iframe src="#" onmousewheel=""></iframe>
When the user clicks on an external iframe, all event listeners on my BODY tag stop working and I need to prompt the user to click outside to regain the "focus" on the body tag.
But knowing when the user clicks on an iframe is actually very hard.
I know of two ways to know when there is a click on an iframe:
1- Overlapping a transparent div on the iframe (with the downside that the user has to click twice to actually click the iframe).
2- A very rough workaround which is having an input autofocused all the time and detect when it loses focus. But it's just stupid to even consider implementing it.
Is there another way to know when the user "loses focus" of the main body by clicking on an external iframe?
This is super easy, but not necessarily effecient/ethical.
setTimeout(function(){
document.body.focus()
}, 100 );
I would in all honesty use option #2 with some jQuery.
$(el).focusout(function(){
$(this).focus();
})
The easiest method and the only one I'm aware of actually is to make an infinite loop that gets current focused element.id.
Then it's simply a matter of comparing that id with your iframes to know which has been clicked.
Note that you will only be able to know for sure the user clicked once in the iframe, but there is no way to count clicks afterwards. Also notes that iframes can focus themselves with this method will be indistinguishable from a click.