Iframe event blocks browser page - javascript

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?

Related

Javascript event listener to ArrowDown - Stop page scrolling

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.

JS: How to open popup window and listen "reload" event?

I need to open a popup window and execute some js code whenever content in that popup is loaded (DOMContentLoaded). For the first time I can listen for the load event $(popup).on('load', ...) but it won't work if I hit F5 (CMD+R) in that popup window. However, hitting reload hotkey will trigger unload event bound same way, but this isn't what I need, I need - load event to be triggered.
Any way?
Thanks.

On change listener not fired for file input in browser action popup

My browser action pop up has a file input, to which a "change" event listener is attached. Problem is, this listener isn't called when I chose file from popup using file chooser dialog, and the popup window is closed.
This doesn't repro when I inspect the popup window, and the listener is called since the window stays open. Now I am trying to find a way to have the change listener called, without needing to inspect the element.
There are no js errors in console. This is all I have in my window.onload
document.getElementById('initial_file').addEventListener('change', dummyFunction, false);
dummyFunction is defined (and executes if I keep the popup window open through inspecting)

Duplicate Event in Parent Window

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.

catch-all keyup/keydown events in iframe?

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.

Categories