Fixing with iFrames

Babylon/Cameras/babylon.arcRotateCamera.js

@@ -247,9 +247,11 @@ var BABYLON;
             element.addEventListener('mousewheel', this._wheel, false);
             element.addEventListener('DOMMouseScroll', this._wheel, false);
 
-            window.addEventListener("keydown", this._onKeyDown, false);
-            window.addEventListener("keyup", this._onKeyUp, false);
-            window.addEventListener("blur", this._onLostFocus, false);
+            BABYLON.Tools.RegisterTopRootEvents([
+                { name: "keydown", handler: this._onKeyDown },
+                { name: "keyup", handler: this._onKeyUp },
+                { name: "blur", handler: this._onLostFocus }
+            ]);
         };
 
         ArcRotateCamera.prototype.detachControl = function (element) {
@@ -267,9 +269,11 @@ var BABYLON;
             element.removeEventListener('mousewheel', this._wheel);
             element.removeEventListener('DOMMouseScroll', this._wheel);
 
-            window.removeEventListener("keydown", this._onKeyDown);
-            window.removeEventListener("keyup", this._onKeyUp);
-            window.removeEventListener("blur", this._onLostFocus);
+            BABYLON.Tools.UnregisterTopRootEvents([
+                { name: "keydown", handler: this._onKeyDown },
+                { name: "keyup", handler: this._onKeyUp },
+                { name: "blur", handler: this._onLostFocus }
+            ]);
 
             this._MSGestureHandler = null;
             this._attachedElement = null;

Babylon/Cameras/babylon.arcRotateCamera.ts

@@ -263,9 +263,11 @@
             element.addEventListener('mousewheel', this._wheel, false);
             element.addEventListener('DOMMouseScroll', this._wheel, false);
 
-            window.addEventListener("keydown", this._onKeyDown, false);
-            window.addEventListener("keyup", this._onKeyUp, false);
-            window.addEventListener("blur", this._onLostFocus, false);
+            Tools.RegisterTopRootEvents([
+                { name: "keydown", handler: this._onKeyDown },
+                { name: "keyup", handler: this._onKeyUp },
+                { name: "blur", handler: this._onLostFocus }
+            ]);
         }
 
         public detachControl(element: HTMLElement): void {
@@ -283,9 +285,11 @@
             element.removeEventListener('mousewheel', this._wheel);
             element.removeEventListener('DOMMouseScroll', this._wheel);
 
-            window.removeEventListener("keydown", this._onKeyDown);
-            window.removeEventListener("keyup", this._onKeyUp);
-            window.removeEventListener("blur", this._onLostFocus);
+            Tools.UnregisterTopRootEvents([
+                { name: "keydown", handler: this._onKeyDown },
+                { name: "keyup", handler: this._onKeyUp },
+                { name: "blur", handler: this._onLostFocus }
+            ]);
 
             this._MSGestureHandler = null;
             this._attachedElement = null;

Babylon/Cameras/babylon.freeCamera.js

@@ -236,9 +236,11 @@ var BABYLON;
             element.addEventListener("mouseout", this._onMouseOut, false);
             element.addEventListener("mousemove", this._onMouseMove, false);
 
-            window.addEventListener("keydown", this._onKeyDown, false);
-            window.addEventListener("keyup", this._onKeyUp, false);
-            window.addEventListener("blur", this._onLostFocus, false);
+            BABYLON.Tools.RegisterTopRootEvents([
+                { name: "keydown", handler: this._onKeyDown },
+                { name: "keyup", handler: this._onKeyUp },
+                { name: "blur", handler: this._onLostFocus }
+            ]);
         };
 
         FreeCamera.prototype.detachControl = function (element) {
@@ -251,9 +253,11 @@ var BABYLON;
             element.removeEventListener("mouseout", this._onMouseOut);
             element.removeEventListener("mousemove", this._onMouseMove);
 
-            window.removeEventListener("keydown", this._onKeyDown);
-            window.removeEventListener("keyup", this._onKeyUp);
-            window.removeEventListener("blur", this._onLostFocus);
+            BABYLON.Tools.UnregisterTopRootEvents([
+                { name: "keydown", handler: this._onKeyDown },
+                { name: "keyup", handler: this._onKeyUp },
+                { name: "blur", handler: this._onLostFocus }
+            ]);
 
             this._attachedElement = null;
             if (this._reset) {

Babylon/Cameras/babylon.freeCamera.ts

@@ -251,9 +251,11 @@
             element.addEventListener("mouseout", this._onMouseOut, false);
             element.addEventListener("mousemove", this._onMouseMove, false);
 
-            window.addEventListener("keydown", this._onKeyDown, false);
-            window.addEventListener("keyup", this._onKeyUp, false);
-            window.addEventListener("blur", this._onLostFocus, false);
+            Tools.RegisterTopRootEvents([
+                { name: "keydown", handler: this._onKeyDown },
+                { name: "keyup", handler: this._onKeyUp },
+                { name: "blur", handler: this._onLostFocus }
+            ]);
         }
 
         public detachControl(element: HTMLElement): void {
@@ -266,9 +268,11 @@
             element.removeEventListener("mouseout", this._onMouseOut);
             element.removeEventListener("mousemove", this._onMouseMove);
 
-            window.removeEventListener("keydown", this._onKeyDown);
-            window.removeEventListener("keyup", this._onKeyUp);
-            window.removeEventListener("blur", this._onLostFocus);
+            Tools.UnregisterTopRootEvents([
+                { name: "keydown", handler: this._onKeyDown },
+                { name: "keyup", handler: this._onKeyUp },
+                { name: "blur", handler: this._onLostFocus }
+            ]);
 
             this._attachedElement = null;
             if (this._reset) {

Babylon/Cameras/babylon.touchCamera.js

@@ -99,7 +99,9 @@ var BABYLON = BABYLON || {};
         canvas.addEventListener("pointerout", this._onPointerUp);
         canvas.addEventListener("pointermove", this._onPointerMove);
 
-        window.addEventListener("blur", this._onLostFocus);
+        Tools.RegisterTopRootEvents([
+            { name: "blur", handler: this._onLostFocus }
+        ]);
     };
 
     BABYLON.TouchCamera.prototype.detachControl = function (canvas) {
@@ -112,7 +114,9 @@ var BABYLON = BABYLON || {};
         canvas.removeEventListener("pointerout", this._onPointerUp);
         canvas.removeEventListener("pointermove", this._onPointerMove);
 
-        window.removeEventListener("blur", this._onLostFocus);
+        Tools.UnregisterTopRootEvents([
+            { name: "blur", handler: this._onLostFocus }
+        ]);
         
         this._attachedCanvas = null;
     };

Babylon/Tools/babylon.tools.js

@@ -285,6 +285,28 @@
             return true;
         };
 
+        Tools.RegisterTopRootEvents = function (events) {
+            for (var index = 0; index < events.length; index++) {
+                var event = events[index];
+                window.addEventListener(event.name, event.handler, false);
+
+                if (window.parent) {
+                    window.parent.addEventListener(event.name, event.handler, false);
+                }
+            }
+        };
+
+        Tools.UnregisterTopRootEvents = function (events) {
+            for (var index = 0; index < events.length; index++) {
+                var event = events[index];
+                window.removeEventListener(event.name, event.handler);
+
+                if (window.parent) {
+                    window.parent.removeEventListener(event.name, event.handler);
+                }
+            }
+        };
+
         Tools.GetFps = function () {
             return fps;
         };

Babylon/Tools/babylon.tools.ts

@@ -305,6 +305,28 @@
             return true;
         }
 
+        public static RegisterTopRootEvents(events: { name: string; handler: EventListener }[]): void {
+            for (var index = 0; index < events.length; index++) {
+                var event = events[index];
+                window.addEventListener(event.name, event.handler, false);
+
+                if (window.parent) {
+                    window.parent.addEventListener(event.name, event.handler, false);
+                }
+            }
+        }
+
+        public static UnregisterTopRootEvents(events: { name: string; handler: EventListener }[]): void {
+            for (var index = 0; index < events.length; index++) {
+                var event = events[index];
+                window.removeEventListener(event.name, event.handler);
+
+                if (window.parent) {
+                    window.parent.removeEventListener(event.name, event.handler);
+                }
+            }
+        }
+
         public static GetFps(): number {
             return fps;
         }