I'm working on a canvas-based game and am using window.addEventListener() to attach keyup and keydown events globally. This works in when viewing the page normally, but when embedding it as an iframe; it doesn't get the keyup and keydown events. Is there a better way I can do this?
You can't, not unless the frame has focus.
What you can do is make a keydown on the outer window focus the iframe, or always somehow focus the iframe, or focus the iframe by default (might be good enough, not sure what you're doing)
But for the window keydown to fire on any window (frame or not) that frame needs focus.
It seems you can just do var realWindow = window.parent || window; and use addEventListener on realWindow instead.
Related
Is there any way to do this? It's not a keylogger, I just want to mess around with analyzing typing speed and technique, etc and I would much rather make a web app or a chrome extension than a native GUI app.
No. When the window is minimized and doesn't have focus (as would seem to be the case in your scenario), even the browser doesn't receive the keypress (on most operating systems), much less pass it on to your window. Your window, and thus the JavaScript code in it, will only see a keypress when the browser is not minimized and your window/tab has focus.
Javascript events are tied to DOM elements present on the current page. You can't listen to an event on anything outside of that page, let alone that window.
I have a hopefully rather simple Javascript question for you. I have a scrollable, static page which can show/hide a full frame overlay (hiding the whole page) using z-index. When the overlay is shown I create a new event listener to "keydown" in which I for example check for "ArrowDown". When the overlay is hidden, the listener is unsubscribed.
This works beautifully, except that the page below the overlay keeps scrolling up and down as it normally would. I thought I could stop that by using
event.stopPropagation()
which, however, does not help. How can I approach this?
Event.stopPropagation() Prevents the event from bubbling up the DOM, but does not stop the browsers default behaviour.
event.preventDefault();
this should work as it stops the browsers default behaviour.
I have an issue where a form is embedded in an iframe and after the form is submitted, the iframe is deleted from the DOM. Immediately after the form is deleted (the form was the last thing to have focus) I am unable to detect events that are bound to the root window element.
The frame is being loaded from a separate domain, although it does not matter for this example, it only matters that I have no control over the scripts on that page.
I understand that I cannot detect DOM events in the iframe, but all events are lost until the user clicks back on the DOM after iframe removal. This happens in both Firefox and Chrome. IE appears to return focus back to the original DOM as expected. I have not tested in other browsers.
$(window).keydown(function(e){
console.log (e.keyCode);
});
var $iframe = $("<iframe src='www.example.com'>");
$("body").append($iframe);
window.setTimeout(function(){
$iframe.remove();
}, 1000);
(The code above is just an example, i have included a working codepen to illustrate further- http://codepen.io/anon/pen/WQroqe)
To use the codepen -
Click the "click to load iframe button".
Make sure you click in the iframe so it has focus
After the iframe deletes, type anything and notice the DOM does not log your key strokes.
Click on the DOM and notice that your keystrokes are being logged properly.
Use Case: Form opens an iframe and submits, then removes itself from the DOM. I want to be able to detect keyboard events after the form is submitted without the user needing to use their mouse.
Question: I thought the top most DOM element was "window" and if this is not capturing the keyboard events, what is? There are no other DOMs currently present (i.e. iframes) as far as I know. I tested this is both firefox and chrome. Any explanation as to what is happening and why what I am trying to do is not possible or a way to capture the events would be greatly appreciated.
(My current solution is to use a MutationObserver to watch for the iframe to disappear and force focus back on the window. I also know I could use a setInterval to continually check for the iframe. Both solution feel like I am doing extra work).
after closing the iframe, focus the window using $(window).focus(); if you must
in the sample you'd do it like
$iframe.load(function(){
window.setTimeout(function(){
console.log("deleting");
$("#deleteMe iframe").remove();
$(window).focus(); // <======
}, 5000);
});
How would I go about simulating a keypress within my editable iframe? (Same domain.)
The iframe has designmode on, and the body is being used as a text field for an RTE.
I have a feeling I need to use the trigger function from jquery, but I am unable to get it to work.
$('#editor body').trigger({type: 'keypress', which: 13, keyCode: 13});
EDIT: Apparently this isn't possible. Is there any way to make an iframe scroll to the cursor's position without pressing a key?
You can't do it with events. Events don't cause keypresses. Keypresses cause events.
WYSIWYG editors have an API that you can use to interact with the editor.
However, if you really need to fire events, then the problem can be broken down into two that already have answers:
how to fire an event in a document
how to access document of an iframe
I have an iframe on my page. The iframe has the same origin as my page, so I shouldn't need to worry too much about cross-origin security problems.
On the parent frame, I have a keydown event listener watching for certain key presses. But if the iframe has the focus, the keydown events are registered in the iframe only.
I would like to duplicate the iframe keydown event on the parent frame.
Is this possible? I have been looking at document.createEvent and evt.initEvent but I am not there yet. Also, if I create a keydown event, will this actually act like the user typed a character? I.e., can I direct them to a field on the parent document?
if you are using jquery, declare a wrapper function in your parent that trigger keydown of your input element:
function triggerKeyDown(){
$("#my_input").keydown();
}
In your iframe, call
window.parent.triggerKeyDown();
to trigger the keydown event in your parent window.