From d12581a1395b366608d0e7b5781a82eed6723244 Mon Sep 17 00:00:00 2001 From: Tim Officer Date: Sun, 10 Feb 2019 12:10:03 -0500 Subject: [PATCH] emit an event using the inner document's onreadystatechange event --- dist/vue-friendly-iframe.js | 29 ++++++++++++----------- dist/vue-friendly-iframe.min.js | 4 ++-- docs-src/components/Home/index.vue | 11 ++++++++- docs-src/components/Home/template.html | 25 ++++++++++++++++++-- docs/docs.js | 4 ++-- docs/index.html | 1 + package.json | 2 +- src/components/FriendlyIframe/index.vue | 31 ++++++++++++++++++------- 8 files changed, 77 insertions(+), 30 deletions(-) diff --git a/dist/vue-friendly-iframe.js b/dist/vue-friendly-iframe.js index 413cb29..96beb64 100644 --- a/dist/vue-friendly-iframe.js +++ b/dist/vue-friendly-iframe.js @@ -1,5 +1,5 @@ /*! - * vue-friendly-iframe v0.11.0 (https://github.com/officert/vue-friendly-iframe) + * vue-friendly-iframe v0.12.0 (https://github.com/officert/vue-friendly-iframe) * (c) 2019 Tim Officer * Released under the MIT License. */ @@ -213,7 +213,8 @@ exports.default = { data: function data() { return { iframeEl: null, - iframeLoadedMessage: 'LOADED_IFRAME_' + generateGuid() + iframeLoadedMessage: 'IFRAME_LOADED_' + generateGuid(), + iframeOnReadyStateChangeMessage: 'IFRAME_ON_READ_STATE_CHANGE_' + generateGuid() }; }, @@ -230,14 +231,8 @@ exports.default = { } }, setIframeUrl: function setIframeUrl() { - var _this = this; - var iframeDoc = this.iframeEl.contentWindow.document; - iframeDoc.open().write(''); - - iframeDoc.onload = function (e) { - _this.$emit('load', e); - }; + iframeDoc.open().write('\n \n \n '); iframeDoc.close(); }, @@ -251,24 +246,30 @@ exports.default = { this.iframeEl.setAttribute('crossorigin', 'anonymous'); this.iframeEl.setAttribute('target', '_parent'); this.iframeEl.setAttribute('style', 'visibility: hidden; position: absolute; top: -99999px'); - if (this.className) this.iframeEl.setAttribute('class', this.className); + this.$el.appendChild(this.iframeEl); this.setIframeUrl(); }, listenForEvents: function listenForEvents() { - var _this2 = this; + var _this = this; var eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent'; var eventer = window[eventMethod]; var messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message'; eventer(messageEvent, function (event) { - if (event.data === _this2.iframeLoadedMessage) { - _this2.$emit('load'); + if (event.data === _this.iframeLoadedMessage) { + _this.$emit('iframe-load'); + + _this.iframeEl.setAttribute('style', 'visibility: visible;'); + } + + if (event.data === _this.iframeOnReadyStateChangeMessage) { + _this.$emit('document-load'); - _this2.iframeEl.setAttribute('style', 'visibility: visible;'); + _this.$emit('load'); } }, false); } diff --git a/dist/vue-friendly-iframe.min.js b/dist/vue-friendly-iframe.min.js index b283648..ef49680 100644 --- a/dist/vue-friendly-iframe.min.js +++ b/dist/vue-friendly-iframe.min.js @@ -1,6 +1,6 @@ /*! - * vue-friendly-iframe v0.11.0 (https://github.com/officert/vue-friendly-iframe) + * vue-friendly-iframe v0.12.0 (https://github.com/officert/vue-friendly-iframe) * (c) 2019 Tim Officer * Released under the MIT License. */ -!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}("undefined"!=typeof self?self:this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),i=function(e){return e&&e.__esModule?e:{default:e}}(r);t.default=i.default,e.exports=t.default},function(e,t,n){var r=n(2)(n(3),n(9),null,null);e.exports=r.exports},function(e,t){e.exports=function(e,t,n,r){var i,o=e=e||{},s=typeof e.default;"object"!==s&&"function"!==s||(i=e,o=e.default);var a="function"==typeof o?o.options:o;if(t&&(a.render=t.render,a.staticRenderFns=t.staticRenderFns),n&&(a._scopeId=n),r){var u=Object.create(a.computed||null);Object.keys(r).forEach(function(e){var t=r[e];u[e]=function(){return t}}),a.computed=u}return{esModule:i,exports:o,options:a}}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(){return(0,s.default)()}Object.defineProperty(t,"__esModule",{value:!0});var o=n(4),s=r(o),a=n(8),u=r(a);t.default={name:"friendly-iframe",props:{src:{type:String,required:!0},className:{type:String,required:!1}},data:function(){return{iframeEl:null,iframeLoadedMessage:"LOADED_IFRAME_"+i()}},computed:{},watch:{src:function(){this.reinitIframe(this)}},methods:{removeIframe:function(){for(;this.$el.firstChild;)this.$el.removeChild(this.$el.firstChild)},setIframeUrl:function(){var e=this,t=this.iframeEl.contentWindow.document;t.open().write(""),t.onload=function(t){e.$emit("load",t)},t.close()},reinitIframe:u.default.debounce(function(e){e.removeIframe(),e.initIframe()},200),initIframe:function(){this.iframeEl=document.createElement("iframe"),this.iframeEl.setAttribute("crossorigin","anonymous"),this.iframeEl.setAttribute("target","_parent"),this.iframeEl.setAttribute("style","visibility: hidden; position: absolute; top: -99999px"),this.className&&this.iframeEl.setAttribute("class",this.className),this.$el.appendChild(this.iframeEl),this.setIframeUrl()},listenForEvents:function(){var e=this,t=window.addEventListener?"addEventListener":"attachEvent";(0,window[t])("attachEvent"===t?"onmessage":"message",function(t){t.data===e.iframeLoadedMessage&&(e.$emit("load"),e.iframeEl.setAttribute("style","visibility: visible;"))},!1)}},mounted:function(){this.listenForEvents(),this.initIframe()}},e.exports=t.default},function(e,t,n){function r(e,t,n){var r=t&&n||0,i=t||[];e=e||{};var s=void 0!==e.clockseq?e.clockseq:u,l=void 0!==e.msecs?e.msecs:(new Date).getTime(),d=void 0!==e.nsecs?e.nsecs:c+1,p=l-f+(d-c)/1e4;if(p<0&&void 0===e.clockseq&&(s=s+1&16383),(p<0||l>f)&&void 0===e.nsecs&&(d=0),d>=1e4)throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");f=l,c=d,u=s,l+=122192928e5;var m=(1e4*(268435455&l)+d)%4294967296;i[r++]=m>>>24&255,i[r++]=m>>>16&255,i[r++]=m>>>8&255,i[r++]=255&m;var v=l/4294967296*1e4&268435455;i[r++]=v>>>8&255,i[r++]=255&v,i[r++]=v>>>24&15|16,i[r++]=v>>>16&255,i[r++]=s>>>8|128,i[r++]=255&s;for(var h=e.node||a,y=0;y<6;++y)i[r+y]=h[y];return t||o(i)}var i=n(5),o=n(7),s=i(),a=[1|s[0],s[1],s[2],s[3],s[4],s[5]],u=16383&(s[6]<<8|s[7]),f=0,c=0;e.exports=r},function(e,t,n){(function(t){var n,r=t.crypto||t.msCrypto;if(r&&r.getRandomValues){var i=new Uint8Array(16);n=function(){return r.getRandomValues(i),i}}if(!n){var o=new Array(16);n=function(){for(var e,t=0;t<16;t++)0==(3&t)&&(e=4294967296*Math.random()),o[t]=e>>>((3&t)<<3)&255;return o}}e.exports=n}).call(t,n(6))},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t){function n(e,t){var n=t||0,i=r;return i[e[n++]]+i[e[n++]]+i[e[n++]]+i[e[n++]]+"-"+i[e[n++]]+i[e[n++]]+"-"+i[e[n++]]+i[e[n++]]+"-"+i[e[n++]]+i[e[n++]]+"-"+i[e[n++]]+i[e[n++]]+i[e[n++]]+i[e[n++]]+i[e[n++]]+i[e[n++]]}for(var r=[],i=0;i<256;++i)r[i]=(i+256).toString(16).substr(1);e.exports=n},function(e,t,n){"use strict";function r(e,t,n){var r=void 0;return function(){var i=this,o=arguments,s=function(){r=null,n||e.apply(i,o)},a=n&&!r;clearTimeout(r),r=setTimeout(s,t),a&&e.apply(i,o)}}Object.defineProperty(t,"__esModule",{value:!0}),t.default={debounce:r},e.exports=t.default},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"vue-friendly-iframe"})},staticRenderFns:[]}}])}); \ No newline at end of file +!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}("undefined"!=typeof self?self:this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),i=function(e){return e&&e.__esModule?e:{default:e}}(r);t.default=i.default,e.exports=t.default},function(e,t,n){var r=n(2)(n(3),n(9),null,null);e.exports=r.exports},function(e,t){e.exports=function(e,t,n,r){var i,o=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(i=e,o=e.default);var s="function"==typeof o?o.options:o;if(t&&(s.render=t.render,s.staticRenderFns=t.staticRenderFns),n&&(s._scopeId=n),r){var u=Object.create(s.computed||null);Object.keys(r).forEach(function(e){var t=r[e];u[e]=function(){return t}}),s.computed=u}return{esModule:i,exports:o,options:s}}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(){return(0,a.default)()}Object.defineProperty(t,"__esModule",{value:!0});var o=n(4),a=r(o),s=n(8),u=r(s);t.default={name:"friendly-iframe",props:{src:{type:String,required:!0},className:{type:String,required:!1}},data:function(){return{iframeEl:null,iframeLoadedMessage:"IFRAME_LOADED_"+i(),iframeOnReadyStateChangeMessage:"IFRAME_ON_READ_STATE_CHANGE_"+i()}},computed:{},watch:{src:function(){this.reinitIframe(this)}},methods:{removeIframe:function(){for(;this.$el.firstChild;)this.$el.removeChild(this.$el.firstChild)},setIframeUrl:function(){var e=this.iframeEl.contentWindow.document;e.open().write("\n \n