iframe tag cannot detect keyboard events for glowscript

[QUAH KAH CHUN UPSI]

Here is https://xiaoxuekexue.github.io/test.html, it works perfectly. 
However, when I place this test.html in an iframe tag of another HTML page https://xiaoxuekexue.github.io/frame.html, I can't ctrl drag or shift drag to adjust the position of camera. What is the solution?

[Bruce Sherwood]

Apparently this bug is ancient. I looked at a very old program embedded in a web page and indeed neither ctrl-drag nor shift-drag works. At the moment I have no real idea of why this is, but I wonder whether a web page normally swallows these inputs. I see the same behavior with Chrome and Firefox.

Bruce

[Bruce Sherwood]

I'm traveling and haven't had the opportunity to try it, but conceivably you could code a workaround that looks for the shift or ctrl key being down and, using the mouse location, mimics the correct behavior.

Bruce

[QUAH KAH CHUN UPSI]

Ok I will try it. But I wonder is this bug came from CSS? Because I use firefox's developer tool to select the canvas element, then ctrl-drag and shift drag works, I have no idea why. 

[Bruce Sherwood]

Thanks for the tip.

Bruce

--

---
You received this message because you are subscribed to the Google Groups "Glowscript Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to glowscript-use...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/glowscript-users/c5a957e7-8d6c-4c2a-88ec-82a30bbaa628n%40googlegroups.com.

[QUAH KAH CHUN UPSI]

Problem solved.  https://xiaoxuekexue.github.io/frame.html 
Now ctrl-drag/shift-drag works by adding this line of code:
document.getElementById('frametest').focus();

So I don't think that the problem comes from glowscript library, the problem should be came HTML and event listener.
iframe tag (from test.html) loses focus, so it can't listen for event eventhough eventlistener exists.
Therefore, iframe should be focused first before using glowscript. 

But here is the catch, focusing an iframe causes the window (iframe.html) to lose its focus.
When window loses focus, it can't listen for events anymore. 
When I click the window (frame.html), ctrl-drag/shift-drag does not work anymore. 

Maybe we can try this,

   document.getElementById('frametest').addEventListener('mouseover', function () {

            document.getElementById('frametest').focus();

        });

        document.getElementById('frametest').addEventListener('mouseleave', function () {

            document.getElementById('frametest').blur();

        });

But I am pretty sure there is a better solution, we don't need to add this everytime we embed the program in webpages.

[Bruce Sherwood]

If you can solve the problem you've identified, the Web VPython export machinery could be changed to include the necessary code.

Bruce

[QUAH KAH CHUN UPSI]

Alright, noted with thanks.