How iframe can capture keyboard like flash? - javascript

I have made a JS/HTML5 game which is controlled by keyboard, I like to make it embeddable like flash games, but when I embed it inside an iframe it only capture keyboard events when iframe is focused. If user interact with other element on the page iframe will lose focus and the game will not receive events.
How can I make it always capture keyboard events from inside iframe and avoid defaults like flash games? For example using space for firing instead of scrolling, from inside iframe.
Why down vote?

This is one way to do it:
function focus()
{
var iframe = document.getElementById('iframe-element')
iframe.contentWindow.focus();
}
window.setInterval(focus, 100);
or jQuery:
$("body").click(function(){
$('#iframe-element').focus();
});
This needs to be run on the host page of course, because allowing an embedded iframe to steal focus is not in the nature of browser/webpage security.
Good luck.

This is not normally possible because of a browser security feature called the Same-Origin-Policy. 1
Basically, one page on one domain can not interact with or intercept the events of another page because it would present a security risk. Imagine opening a frame to a user's bank account and then capturing keypresses they did in that frame -- obviously that would be a Very Bad Thing (tm). It works the other way around too, the contents of a frame can not see events on the parent page unless they are on the same domain.
Now browsers do still want to allow you to interact with contents within a frame. So when you start interacting with contents of one frame, the other frame loses any awareness of what's going on.
So, after all this, you're probably still wondering how to address your problem. Here are a few good options.
Instead of loading your game in an iframe, have the user embed it into their current page instead. You could have them do this by either providing them with the code to your game and having them place it in their page, or by providing a script tag that loads code from your own server and places the game into their page.
Use Cross-Document messaging 2, A relatively new browser feature that allows pages to get around the normal Same-Origin-Policy restrictions. Basically, with Cross Document Messaging, you can run javascript on the parent page that sends events into the page within the iframe.

This is not a complete Solution but an Idea....
What about capturing all Keyboard events on the site and then decide (e.g. by checking the value of some invisible input/element within the iframe) if a game is in progress. If it is, preventDefault of the action and trigger some custom event inside the iframe and just make your game listen for the custom events too...
Actually I just found this:
Access elements of parent window from iframe
That way you could apply my solution from within the Iframe and check for clicks/keys on its parent
Regards

Related

Can you detect DOM events on sibling nodes from within an iframe to protect against clickjacking?

Is it possible to allow a page from your domain that contains a form to be embedded in a page on a unknown domain and be able to detect DOM events from other elements on that page?
The issue I am trying to investigate is that a malicious party embed the page and then place a clear form over the top of our embedded form (so called click-jacking).
The problem is that the form is intended to be embedded in third-party websites, so can't be restricted through use of X-Frame-Option headers. Even if we ask users to register their domains, a malicious user could just register their domain!
So I am looking for a way to detect if a DOM event such as keydown has been prevented from propagating to my form component, but as the clear form overlay would be a sibling element and outside the scope of the iframe, I fear there is no way of doing this.
I understand the concept of frame-busting (but our embed is meant to be in a frame) and the concept of restricting access to certain domains (but as mentioned, this won't help), but wonder if anyone has experience of allowing embedding of forms and how to protect the form once embedded.

How to Track Clicks in an IFrame with Google Analytics?

I'd like to track outbound clicks within an iframe on my self-hosted Wordpress site. I already use Google Analytics to track inbound visitors (GA code in the header), but I'd like to know which/how many of those visitors click on links within the iframe on each of my pages. For the record, the iframe does come from an external advertiser.
This is the iframe code I was given (using sample names in place of real ones):
<iframe src="http://www.advertisersite123.com//widget.html?width=510&height=950&product=2" frameborder="0" scrolling="no" width="510" height="950"></iframe>
This line of code is currently pasted on single.php, making a table of links appear on every single post at the bottom of the page.
I'd like to know how many clicks (just clicks in general is fine, don't need to know where they go) are occurring in this iframe. Ideally broken down by each individual URL on my website so I can determine which URLs are more successful in generating clicks within the iframe.
And if possible, I'd like to create a funnel that tells me which visitors to my website (by source) exit via clicks in the iframe.
Is any of this possible? And if so, what code do I add to the page?
Thank you for any and all assistance, it is appreciated!
What you are asking for is not easily done. In general, you cannot have javascript on the parent page that can hook into events on the iframed page if it is not hosted on the same domain. Same thing for the iframe page trying to tap into the parent page's DOM. This is called cross-site scripting (XSS), which goes against the same domain origin policy.
At a minimum, the easiest thing to do would be to put the GA code on the iframed page. But that's probably not something you can do (though it couldn't hurt to ask the vendor).
But some vendors (usually social media vendors such as Facebook, Google and Twitter) will have their widgets that output an iframe w/ info. They will set their server to allow for cross-domain scripting, which would allow you to tap into the iframe's DOM. Usually though they provide an API along with the widget that makes it easier to hook into relevant events (like share events), so that you don't have to do (much) coding yourself.
Basically long story short, there's no way for you to track it without the person in charge of the iframe domain getting involved.
I was searching for something similar and came across this. This jQuery Plugin lets you track an Iframe.
Tried events?
If the click is out of iframe:
_gaq.push(['_trackEvent', eventCategory, eventAtion, eventLabel]);
If the click is inside the iframe you should use:
window.parent._gaq.push(['_trackEvent', eventCategory, eventAtion, eventLabel]);

How to make javascript that'll click automatically inside iframe's link?

Is it possible ?
I've made on page with iframe, I want a script that'll click automatically inside in one iframe's link.
But I also want that script to detect half link, I mean the link which is in iframe changes everytime, but the first part of the link doesnt change, so the javascript should detect half link which doesnt change and redirect to it...
Why don't you write a "client" library and import it within iFrame. This library listen to a message from HTML5 postMessage call with certain attribute and react appropriately. Since you have access to the parent object through the event object (or window.parent), you can also send response back with the result. This way, it doesn't matter if it's cross-domain and as long as this library exists, you can communicate back-and-forth and even has the iFrame initiate if you write it properly.
I can't share the code with you since it's our proprietary library, but that's part of the idea.
If the content of your iframe is from a different domain, you can't. Allowing this would be a major security concern.
If your iframe content is in the same domain, then you can access the iframe content through its contentWindow property. You can then work with your iframe link the same way you would if the link was in the main page.

iframe events in other html

I'm using an Iframe to have an html file work on a homepage when someone clicks on a link. When I use the html file by itself as a webpage, things like multiple key depressions and such work and are accessible. But they aren't when I access the html via an iframe.
Is this even possible?
Edit
Oh, I have a function in my main.html file, which detects key depressions and plays video files based off of key presses (it's a psuedo video game). It uses eventlisteners and objects to detect positions of keys. But again, this doesn't work when I view it in an iframe from some other html page, index.html
First off, if your iframe and parent are on different domains, you're going to have some security issues that you may/may not be able to get around (read Cross-Domain Communication with IFrames).
As for how to access your iframe's events from the parent.
See:
Adding an event listener to an iframe
Add event to iframe body
Adding click event handler to iframe
Adding event handler to an iframe using JQuery
EDIT: Should mention that your question is a bit ambiguous, so I'm kind of shooting in the dark here with this answer.

Check the mouse position in the screen

I have an iFrame with custom website page loaded into it. I am trying to find a way to get the word or text the mouse was hold down over it on that page using JS. To make it more clear, when the mouse was hold down on a specific word on the web page I want to do some actions in JS.
How can I do this check? I dont' have control over the web page content, I may load this StackOverFlow Question in the iFrame and if the user clicked on this bold word I want to do some actions in JS.
Any idea?
You won't be able to access the contents of external iframes for security reasons (this includes setting event handlers). This response explains it further.

Categories