add support for additional iframe attributes

dist/vue-friendly-iframe.js

@@ -1,5 +1,5 @@
 /*!
- * vue-friendly-iframe v0.12.0 (https://github.com/officert/vue-friendly-iframe)
+ * vue-friendly-iframe v0.13.0 (https://github.com/officert/vue-friendly-iframe)
  * (c) 2019 Tim Officer
  * Released under the MIT License.
  */
@@ -208,6 +208,22 @@ exports.default = {
     className: {
       type: String,
       required: false
+    },
+    frameborder: {
+      type: String,
+      required: false
+    },
+    gesture: {
+      type: String,
+      required: false
+    },
+    allow: {
+      type: String,
+      required: false
+    },
+    allowfullscreen: {
+      type: String,
+      required: false
     }
   },
   data: function data() {
@@ -247,6 +263,11 @@ exports.default = {
       this.iframeEl.setAttribute('target', '_parent');
       this.iframeEl.setAttribute('style', 'visibility: hidden; position: absolute; top: -99999px');
       if (this.className) this.iframeEl.setAttribute('class', this.className);
+      if (this.class) this.iframeEl.setAttribute('class', this.class);
+      if (this.frameborder) this.iframeEl.setAttribute('frameborder', this.frameborder);
+      if (this.gesture) this.iframeEl.setAttribute('gesture', this.gesture);
+      if (this.allow) this.iframeEl.setAttribute('allow', this.allow);
+      if (this.allowfullscreen) this.iframeEl.setAttribute('allowfullscreen', this.allowfullscreen);
 
       this.$el.appendChild(this.iframeEl);
 

docs-src/components/Home/template.html

@@ -86,7 +86,7 @@ <h2>Example</h2>
         <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" @iframe-load="onIframeLoad" @document-load="onDocumentLoad"></vue-friendly-iframe>
+        <vue-friendly-iframe :style="{ 'display' : iframeLoading ? 'none' : 'block' }" :src="example1Form.src + '/' + example1Form.searchTerm" @load="onLoad" @iframe-load="onIframeLoad" @document-load="onDocumentLoad" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen="allowfullscreen"></vue-friendly-iframe>
       </div>
     </div>
   </section>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-friendly-iframe",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Vue component for creating dynamic async iframes",
   "main": "dist/vue-friendly-iframe.js",
   "scripts": {

src/components/FriendlyIframe/index.vue

@@ -22,6 +22,22 @@ export default {
     className: {
       type: String,
       required: false
+    },
+    frameborder: {
+      type: String,
+      required: false
+    },
+    gesture: {
+      type: String,
+      required: false
+    },
+    allow: {
+      type: String,
+      required: false
+    },
+    allowfullscreen: {
+      type: String,
+      required: false
     }
   },
   data() {
@@ -71,6 +87,11 @@ export default {
       this.iframeEl.setAttribute('target', '_parent');
       this.iframeEl.setAttribute('style', 'visibility: hidden; position: absolute; top: -99999px');
       if (this.className) this.iframeEl.setAttribute('class', this.className);
+      if (this.class) this.iframeEl.setAttribute('class', this.class);
+      if (this.frameborder) this.iframeEl.setAttribute('frameborder', this.frameborder);
+      if (this.gesture) this.iframeEl.setAttribute('gesture', this.gesture);
+      if (this.allow) this.iframeEl.setAttribute('allow', this.allow);
+      if (this.allowfullscreen) this.iframeEl.setAttribute('allowfullscreen', this.allowfullscreen);
 
       this.$el.appendChild(this.iframeEl);