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.
Related
The fact is that iframe have blur event listener on window which returns focus on it on every click outside of iframe.
Codesandbox
Is there a way to block this?
Is it possible to prevent an event from reaching listener set at document.window with capturing enabled?
Context
I am working on a chrome extension where I add some dom element (including some input element) to the dom from content-script. In a page, there is an event listener attached to the document.window with capture enabled, that listener takes away focus form my input element on any keydown event. As a result my input element is basically not working. I need to prevent that event from reaching the listener at window somehow.
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 am trying to put a keydown listener on my page. However, my page contains an iFrame, and the handler does not fire if I click inside the iFrame and push my key. I've tried various formulas from around the web to access the document inside the iFrame and put a listener on it, but it doesn't seem to work.
The content in the document is not from the same origin. It comes from a different domain from my website.
Can I listen for the keydown event? Or is that not possible?
Short answer: No.
Long answer (from my understanding): you can't listen to events such as key presses and so on because it would involve binding listeners to elements within the document, and if you had access to such elements then you could theoretically modify the contents of said document, which is undesirable if someone that does not own the content is embedding it on their page. That said, you can fire an onload event for the iframe or overlay a div using some CSS positioning that will have key listeners on them.
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.