There is a problem in iframe
krumza July 31st, 2017

don't know sounded to me, but I think I found a serious problem in the mode when the game is inserted through iframe.

unclear behavior of event listeners on click of the keyboard.

They don't work at all. I was trying to decide, maybe it's the scripts page (the game store) pick up events and keep it in iframe- - but no, the problem is so deep that I don't even know how to solve.

partially solved if the page to add to iframe onload="this.contentWindow.focus()"

but if it did the trick to remove something its impossible to recover even if the same function to hang up on click

All 5 Comments
foxcode July 31st, 2017

Are you saying that if you run a wade app outside of the editor, none of the keyboard event listeners work unless you call "this.contentWindow.focus()"?

Do you know if they work when not inside an iframe, just a plain html file where you have something like this

    <script>
		document.addEventListener('DOMContentLoaded', function()
        {
            wade.init('app.js', null, {debug: true});
        });
    </script>

</head>

<body>

<div id="container" style="border:0; width:800px; height:600px;">
    <div id="wade_main_div" width="800" height="600" tabindex="1">
    </div>
</div>

 

In either case I will have a quick test of this now to see if I can replicate what you are seeing

krumza July 31st, 2017

I solved this problem only through the window.top.postMessage()

maybe I really missed something, but the events are not

 

P.S. I think the root of the problem in the CSS - the content of the frame overrides any parent

krumza July 31st, 2017

foxcode  i say about some different thing.

There is a many ways to show and use game in production - as example - put game in iframe on target page on the main site

To recreate my problem - just create any simple platformer with keyboard controls and put it as iframe in responsive container - such as bootstrap embed technique (div with zero height and :before with % padding)

Loosing focus not back without  postMessage(), for keyboard events

But click on iframe is working! And this help me create function, that send message on parent window and then event on this message i set focus to iframe - and keyboard events work again

 

Gio August 1st, 2017

Hi krumza

If I understand correctly, you want your iframe to receive keyboard events. 

There is a restriction on this, implemented by all browsers for security reasons (unrelated to wade, this happens in general for any html document): a child iframe cannot receive any input events from its parent window. The reason is simple: imagine for example that you have a website where you need to enter your password, and have an iframe with some adverts on the same page; you certainly don't want that iframe to capture the user password as it is typed in.

The solution is for the parent window to explictly set focus on the iframe. Using jQuery, you'd do this (from the parent window):

$(iframe).focus();

Of course you'd need to do this every time your iframe loses focus. 

Exactly how you want to do this depends on your particular case. For example, do you want the iframe to always catch all events, including mouse events, or just keyboard events?

You could do this on an interval, or you could do this in response to an event. For example, when the iframe loses focus (in the iframe's blur event), you can immediately focus it again. Or you could do this on a keypress event.

The important thing is, this needs to be done in the parent page, not in the iframe.

krumza August 1st, 2017

Alas, translators distort the whole meaning of what I want to say

Here is working example - https://dolcepizza.su/games/108-dolce-game

Both - iframe and site - use same resourses - there no cross origin

The problem is that iframe intercepts a click and does not pass to his parent  to cause focus

$(iframe).focus();

And i solve tthis only with postMessage () with iframe and parent window

I catch click in wade and then send message to parent window that parent make focus on iframe - it turn on keyboard listeners

Probably otherwise not be able to insert a game in iframe (if the control on the keyboard)

 

Post a reply
Add Attachment
Submit Reply
Login to Reply