Webview <-> parent communication to send title, url

src/components/Artboard.vue

@@ -22,7 +22,8 @@
     </div>
     <div class="artboard__keypoints"></div>
     <div class="artboard__content">
-      <iframe v-bind:src="url" ref="iframe" class="iframe" nwfaketop frameborder="0"></iframe>
+      <!-- <iframe v-bind:src="url" ref="iframe" class="iframe" nwfaketop frameborder="0"></iframe> -->
+      <webview id="foo" v-bind:src="url" ref="iframe" class="iframe"></webview>
       <div class="artboard__handles">
         <div @mousedown="triggerResize" class="handle__bottom"/>
       </div>
@@ -58,8 +59,8 @@ export default {
   },
 
   watch: {
-    // Toggle iFrame pointer-events based on the isSelected artboard state
     "state.isSelected": {
+      // Toggle iFrame pointer-events based on the isSelected artboard state
       handler: function() {
         const element = this.$refs.iframe;
         if (this.state.isSelected == true) {
@@ -71,30 +72,80 @@ export default {
         }
       }
     },
-    // When the URL is changed, do this:
     url: {
+      // When the URL is changed, do this:
       handler: function() {
-        const _this = this;
+        this.loadSite();
+      }
+    }
+  },
 
-        // Update the iFrame's src
-        this.$refs.iframe.src = this.url;
+  methods: {
+    loadSite() {
+      const _this = this;
+      const frame = this.$refs.iframe;
 
-        // Show loading spinner
-        this.state.isLoading = true;
+      // Update the iFrame's src
+      frame.src = this.$store.state.site.url;
 
-        // Site is loaded
-        this.$refs.iframe.onload = function() {
-          // Set page title (from iFrame)
-          const title = _this.$refs.iframe.contentWindow.document.title;
-          _this.$store.commit('changeSiteTitle', title);
+      // When loading of webview starts
+      function loadstart() {
+        _this.state.isLoading = true; // Show loading spinner
+      }
 
-          _this.state.isLoading = false; // Hide loading spinner
-        };
+      // Once webview content is loaded
+      function contentload() {
+        // The following will be injected in the webview
+        const execCode = `
+            var data = {
+              title: document.title,
+              url: window.location.href,
+              favicon:
+                "https://www.google.com/s2/favicons?domain=" +
+                window.location.href
+            };
+
+            function respond(event) {
+              event.source.postMessage(data, '*');
+            }
+
+            window.addEventListener("message", respond, false);
+        `;
+
+        frame.executeScript({
+          code: execCode
+        });
       }
-    }
-  },
 
-  methods: {
+      // Loading has finished
+      function loadstop() {
+        _this.state.isLoading = false; // Hide loading spinner
+        frame.contentWindow.postMessage("Send me your data!", "*"); // Send a request to the webview
+      }
+
+      // Bind events
+      frame.addEventListener("loadstart", loadstart);
+      frame.addEventListener("contentload", contentload);
+      frame.addEventListener("loadstop", loadstop);
+      window.addEventListener("message", receiveHandshake, false); // Listen for response
+
+      function receiveHandshake(event) {
+        // Data is accessible as event.data.*
+        // Refer to the object that's injected during contentload()
+        // for all keys
+        _this.$store.commit("changeSiteTitle", event.data.title);
+        removeListeners();
+      }
+
+      // Remove all event listeners
+      function removeListeners() {
+        frame.removeEventListener("loadstart", loadstart);
+        frame.removeEventListener("contentload", contentload);
+        frame.removeEventListener("loadstop", loadstop);
+        window.removeEventListener("message", receiveHandshake);
+      }
+    },
+
     // Limits the size of an artboard
     validateArtboardSizeInput(name, value) {
       // @TODO: Refactor this into the size editor

src/store/index.js

@@ -27,24 +27,26 @@ const store = new Vuex.Store({
         );
       }
     },
-    
+
     /** Sets the Site Title (via iFrame)
      * @param  {} state
      * @param  {} val
      */
     changeSiteTitle(state, val) {
+      console.log(val);
       if (val !== state.site.title) {
         state.site.title = val;
       }
     },
 
-
     /** Change the Site URL
      * @param  {} state
      * @param  {} val
      */
     changeSiteURL(state, val) {
-      state.site.url = val; // Update the URL based on the incoming value
+      if (val && val !== "" && val !== state.site.url) {
+        state.site.url = val; // Update the URL based on the incoming value
+      }
     },
 
     /** Toggle the Sidebar on/off