emit a load event from iframe, bump version

officert · Feb 6, 2019 · 7473dda · 7473dda
1 parent 9309231
commit 7473dda
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 24 deletions.
diff --git a/dist/vue-friendly-iframe.js b/dist/vue-friendly-iframe.js
@@ -1,6 +1,6 @@
 /*!
- * vue-friendly-iframe v0.10.0 (https://github.com/officert/vue-friendly-iframe)
- * (c) 2018 Tim Officer
+ * vue-friendly-iframe v0.11.0 (https://github.com/officert/vue-friendly-iframe)
+ * (c) 2019 Tim Officer
  * Released under the MIT License.
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -230,9 +230,15 @@ exports.default = {
       }
     },
     setIframeUrl: function setIframeUrl() {
+      var _this = this;
+
       var iframeDoc = this.iframeEl.contentWindow.document;
       iframeDoc.open().write('<body onload="window.location.href=\'' + this.src + '\'; parent.postMessage(\'' + this.iframeLoadedMessage + '\', \'*\')"></body>');
 
+      iframeDoc.onload = function (e) {
+        _this.$emit('load', e);
+      };
+
       iframeDoc.close();
     },
 
@@ -252,19 +258,17 @@ exports.default = {
       this.setIframeUrl();
     },
     listenForEvents: function listenForEvents() {
-      var _this = this;
+      var _this2 = this;
 
       var eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
       var eventer = window[eventMethod];
       var messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
 
       eventer(messageEvent, function (event) {
-        if (event.data === _this.iframeLoadedMessage) {
-          _this.$emit('load');
-
-          console.log('LOAD');
+        if (event.data === _this2.iframeLoadedMessage) {
+          _this2.$emit('load');
 
-          _this.iframeEl.setAttribute('style', 'visibility: visible;');
+          _this2.iframeEl.setAttribute('style', 'visibility: visible;');
         }
       }, false);
     }

diff --git a/dist/vue-friendly-iframe.min.js b/dist/vue-friendly-iframe.min.js
diff --git a/docs-src/components/App/index.vue b/docs-src/components/App/index.vue
@@ -14,8 +14,8 @@ export default {
 
 <style lang="less">
 .btn-xl {
-  padding: 20px 30px;
-  font-size: 22px;
+    padding: 20px 30px;
+    font-size: 22px;
 }
 
 button,
@@ -37,7 +37,8 @@ input[type="submit"] {
 }
 
 button[disabled],
-input[type="submit"][disabled], input[readonly] {
+input[type="submit"][disabled],
+input[readonly] {
     background: #a0d4de;
     border-color: #a0d4de;
     cursor: default;
@@ -80,4 +81,15 @@ button.hide-loader .hidden {
     border-radius: 0.25rem;
     transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
 }
+
+.iframe-wrapper {
+    border: 1px solid gray;
+    height: 600px;
+
+    .iframe-loading {
+        padding: 60px 0;
+        text-align: center;
+        color: black;
+    }
+}
 </style>
diff --git a/docs-src/components/Home/index.vue b/docs-src/components/Home/index.vue
@@ -9,10 +9,17 @@ export default {
       example1Form: {
         src: 'https://www.pexels.com/search',
         searchTerm: 'tiger'
-      }
+      },
+      iframeLoading: true
     }
   },
-  methods: {}
+  methods: {
+    onLoad() {
+      console.log('iframe loaded');
+
+      this.iframeLoading = false;
+    }
+  }
 };
 </script>
 

diff --git a/docs-src/components/Home/template.html b/docs-src/components/Home/template.html
@@ -46,7 +46,7 @@ <h2>Usage</h2>
         2) In your HTML add the component:
       </p>
       <div class="highlight">
-        <pre class="highlight">&lt;vue-friendly-iframe :src="example1Form.src"&gt;&lt;/vue-friendly-iframe&gt;</pre>
+        <pre class="highlight">&lt;vue-friendly-iframe :src="example1Form.src" @load="onLoad" &gt;&lt;/vue-friendly-iframe&gt;</pre>
       </div>
     </div>
     <h2>Example</h2>
@@ -61,8 +61,11 @@ <h2>Example</h2>
           <input class="form-control" :value="example1Form.src + '/' + example1Form.searchTerm" readonly="readonly">
         </div>
       </form>
-      <div>
-        <vue-friendly-iframe :src="example1Form.src + '/' + example1Form.searchTerm"></vue-friendly-iframe>
+      <div class="iframe-wrapper">
+        <div class="iframe-loading" v-if="iframeLoading">
+          iframe loading...
+        </div>
+        <vue-friendly-iframe :style="{ 'display' : iframeLoading ? 'none' : 'block' }" :src="example1Form.src + '/' + example1Form.searchTerm" @load="onLoad"></vue-friendly-iframe>
       </div>
     </div>
   </section>

diff --git a/docs/docs.js b/docs/docs.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-friendly-iframe",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Vue component for creating dynamic async iframes",
   "main": "dist/vue-friendly-iframe.js",
   "scripts": {

diff --git a/src/components/FriendlyIframe/index.vue b/src/components/FriendlyIframe/index.vue
@@ -46,6 +46,10 @@ export default {
       const iframeDoc = this.iframeEl.contentWindow.document;
       iframeDoc.open().write(`<body onload="window.location.href='${this.src}'; parent.postMessage('${this.iframeLoadedMessage}', '*')"></body>`);
 
+      iframeDoc.onload = (e) => {
+        this.$emit('load', e);
+      };
+
       iframeDoc.close(); //iframe onload event happens
     },
     reinitIframe: utils.debounce(vm => {
@@ -74,8 +78,6 @@ export default {
         if (event.data === this.iframeLoadedMessage) {
           this.$emit('load');
 
-          console.log('LOAD');
-
           this.iframeEl.setAttribute('style', 'visibility: visible;');
         }
       }, false);