Fixed problem of blank frames

brookhong · May 5, 2018 · a7f3423 · a7f3423
1 parent ae96311
commit a7f3423
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 57 deletions.
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,22 @@
+## Prelude
+* Could you find answer in below documents?
+
+    1. [FAQ](https://github.com/brookhong/Surfingkeys/wiki/FAQ) / [常见问题](https://github.com/brookhong/Surfingkeys/wiki/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
+    1. [README](https://github.com/brookhong/Surfingkeys/blob/master/README.md) / [读我](https://github.com/brookhong/Surfingkeys/blob/master/README_CN.md)
+
+* Have you searched your problem in [issues](https://github.com/brookhong/Surfingkeys/issues)?
+
+## Error details
+
+SurfingKeys: <version>
+
+Browser: <version><os version>
+
+URL: <The_URL_Where_You_Find_The_Issue>
+
+**You could simply click dropdown menu from Surfingkeys' icon in toolbar, which will provide necessary info.**
+![image](https://user-images.githubusercontent.com/288207/39614555-6048977e-4fa3-11e8-8476-46203af7c4d6.png)
+
+## Context
+
+**Please replace this with a description of how you were using SurfingKeys.**
diff --git a/content_scripts/normal.js b/content_scripts/normal.js
@@ -89,8 +89,6 @@ var Mode = (function() {
         }
     }
 
-    var _listenedEvents = ["keydown", "keyup"];
-
     function handleStack(eventName, event, cb) {
         for (var i = 0; i < mode_stack.length && !event.sk_stopPropagation; i++) {
             var m = mode_stack[i];
@@ -106,19 +104,39 @@ var Mode = (function() {
         }
     }
 
-    window.addEventListener("keydown", function(event) {
-        event.sk_keyName = KeyboardUtils.getKeyChar(event);
-        handleStack("keydown", event);
-    }, true);
+    var _listenedEvents = ["keydown", "keyup"];
 
-    window.addEventListener("keyup", function(event) {
-        handleStack("keyup", event, function(m) {
-            if (m.stopKeyupPropagation === event.keyCode) {
-                event.stopImmediatePropagation();
-                m.stopKeyupPropagation = 0;
-            }
+    self.init = function() {
+        window.addEventListener("keydown", function (event) {
+            event.sk_keyName = KeyboardUtils.getKeyChar(event);
+            handleStack("keydown", event);
+        }, true);
+
+        window.addEventListener("keyup", function (event) {
+            handleStack("keyup", event, function (m) {
+                if (m.stopKeyupPropagation === event.keyCode) {
+                    event.stopImmediatePropagation();
+                    m.stopKeyupPropagation = 0;
+                }
+            });
+        }, true);
+    };
+
+    // For blank page in frames, we defer Mode.init to page loaded
+    // as document.write will clear added eventListeners.
+    if (window.location.href === "about:blank" && window.frameElement) {
+        window.frameElement.addEventListener("load", function(evt) {
+            self.init();
+            _listenedEvents.forEach(function(evt) {
+                if (["keydown", "keyup"].indexOf(evt) === -1) {
+                    window.addEventListener(evt, handleStack.bind(handleStack, evt), true);
+                }
+            });
         });
-    }, true);
+    } else {
+        self.init();
+    }
+
 
     self.showStatus = function() {
         if (document.hasFocus() && mode_stack.length) {

diff --git a/content_scripts/top.js b/content_scripts/top.js
@@ -16,6 +16,51 @@ if (window === top) {
             ack: true,
             origin: getDocumentOrigin()
         }, frontEndURL);
+
+        window.addEventListener('message', function(event) {
+            var _message = event.data;
+            if (_message.commandToFrontend || _message.responseToFrontend) {
+                // forward message to frontend
+                ifr.contentWindow.postMessage(_message, frontEndURL);
+                if (_message.commandToFrontend && event.source && _message.action === 'showStatus') {
+                    if (!activeContent || activeContent.window !== event.source) {
+                        // reset active Content
+
+                        if (activeContent) {
+                            activeContent.window.postMessage({
+                                action: 'deactivated',
+                                direct: true,
+                                reason: `${_message.action}@${event.timeStamp}`,
+                                commandToContent: true
+                            }, activeContent.origin);
+                        }
+
+                        activeContent = {
+                            window: event.source,
+                            origin: _message.origin
+                        };
+
+                        activeContent.window.postMessage({
+                            action: 'activated',
+                            direct: true,
+                            reason: `${_message.action}@${event.timeStamp}`,
+                            commandToContent: true
+                        }, activeContent.origin);
+                    }
+                }
+                if (_message.action === "visualUpdatedForFirefox") {
+                    document.activeElement.blur();
+                }
+            } else if (_message.action && _actions.hasOwnProperty(_message.action)) {
+                _actions[_message.action](_message);
+            } else if (_message.commandToContent || _message.responseToContent) {
+                // forward message to content
+                if (activeContent && !_message.direct && activeContent.window !== top) {
+                    activeContent.window.postMessage(_message, activeContent.origin);
+                }
+            }
+        }, true);
+
     }, false);
 
     setTimeout(function() {
@@ -61,50 +106,6 @@ if (window === top) {
         lastStateOfPointerEvents = response.pointerEvents;
     };
 
-    window.addEventListener('message', function(event) {
-        var _message = event.data;
-        if (_message.commandToFrontend || _message.responseToFrontend) {
-            // forward message to frontend
-            ifr.contentWindow.postMessage(_message, frontEndURL);
-            if (_message.commandToFrontend && event.source && _message.action === 'showStatus') {
-                if (!activeContent || activeContent.window !== event.source) {
-                    // reset active Content
-
-                    if (activeContent) {
-                        activeContent.window.postMessage({
-                            action: 'deactivated',
-                            direct: true,
-                            reason: `${_message.action}@${event.timeStamp}`,
-                            commandToContent: true
-                        }, activeContent.origin);
-                    }
-
-                    activeContent = {
-                        window: event.source,
-                        origin: _message.origin
-                    };
-
-                    activeContent.window.postMessage({
-                        action: 'activated',
-                        direct: true,
-                        reason: `${_message.action}@${event.timeStamp}`,
-                        commandToContent: true
-                    }, activeContent.origin);
-                }
-            }
-            if (_message.action === "visualUpdatedForFirefox") {
-                document.activeElement.blur();
-            }
-        } else if (_message.action && _actions.hasOwnProperty(_message.action)) {
-            _actions[_message.action](_message);
-        } else if (_message.commandToContent || _message.responseToContent) {
-            // forward message to content
-            if (activeContent && !_message.direct && activeContent.window !== top) {
-                activeContent.window.postMessage(_message, activeContent.origin);
-            }
-        }
-    }, true);
-
     document.addEventListener('DOMContentLoaded', function (e) {
 
         runtime.command({

diff --git a/tests/writeFrame.html b/tests/writeFrame.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <title>Test Page</title>
+    </head>
+    <body>
+        <iframe id="testF"></iframe>
+        <script type="text/javascript">
+            var fr = document.getElementById("testF");
+            fr.contentWindow.addEventListener("click", function(evt) {
+                console.log(evt + 1);
+            });
+            fr.addEventListener("load", function(evt) {
+                console.log(evt + window.location.href);
+            });
+            fr.contentWindow.addEventListener("load", function(evt) {
+                console.log(evt + window.location.href);
+            });
+            fr.contentWindow.document.write("yes");
+            fr.contentWindow.addEventListener("click", function(evt) {
+                console.log(evt + 2);
+            });
+            fr.contentWindow.addEventListener("load", function(evt) {
+                console.log(evt + window.location.href);
+            });
+            fr.contentWindow.document.write("yes2");
+            fr.contentWindow.document.close();
+            fr.contentWindow.addEventListener("click", function(evt) {
+                console.log(evt + 3);
+            });
+        </script>
+    </body>
+</html>