vue-iframes
Version:
Vue component for creating dynamic async iframes
319 lines (301 loc) • 11.1 kB
JavaScript
'use strict';
var uuid = require('uuid');
var debounce = require('lodash.debounce');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
//
var script = {
name: 'VueIframe',
props: {
src: {
type: String,
required: true
},
crossorigin: {
type: String,
default: 'anonymous'
},
target: {
type: String,
default: '_parent'
},
className: {
type: String,
required: false
},
allow: {
type: String,
default: 'camera *; geolocation *; microphone *; autoplay *'
},
name: {
type: String,
default: 'vue-iframes'
},
frameId: {
type: String,
default: 'vue-iframes'
},
scrolling: String,
width: [String, Number],
height: [String, Number]
},
data () {
return {
iframeEl: {},
iframeLoadedMessage: `IFRAME_LOADED_${uuid.v4()}`,
iframeOnReadyStateChangeMessage: `IFRAME_ON_READ_STATE_CHANGE_${uuid.v4()}`
};
},
methods: {
removeIframe () {
while (this.$el.firstChild) {
this.$el.removeChild(this.$el.firstChild);
}
},
setIframeUrl () {
if(!this.iframeEl.contentWindow) {
this.initIframe();
}
this.$nextTick(() => {
const iframeDoc = this.iframeEl.contentWindow.document;
iframeDoc.open()
.write(`
<body onload="window.location.href='${this.src}'; parent.postMessage('${this.iframeLoadedMessage}', '*')"></body>
<script>
window.document.onreadystatechange = function () {
if (window.document.readyState === 'complete') {
parent.postMessage('${this.iframeOnReadyStateChangeMessage}', '*')
}
};
<\/script>
`);
iframeDoc.close(); //iframe onload event happens
});
},
reinitIframe: debounce__default["default"](function () {
this.removeIframe();
this.initIframe();
}, 200),
initIframe () {
this.iframeEl = document.createElement('iframe');
this.iframeEl.setAttribute('style', 'visibility: hidden; position: absolute; top: -99999px; border: none;');
this.iframeEl.setAttribute('id', this.frameId);
this.iframeEl.setAttribute('frameborder', 0);
this.iframeEl.setAttribute('id', this.frameId);
if (this.src) this.iframeEl.setAttribute('iframe-src', this.src);
if (this.className) this.iframeEl.setAttribute('class', this.className);
if (this.crossorigin) this.iframeEl.setAttribute('crossorigin', this.crossorigin);
if (this.target) this.iframeEl.setAttribute('target', this.target);
if (this.allow) this.iframeEl.setAttribute('allow', this.allow);
if (this.name) this.iframeEl.setAttribute('name', this.name);
if (this.scrolling) this.iframeEl.setAttribute('scrolling', this.scrolling);
if (this.width) this.iframeEl.setAttribute('width', this.width);
if (this.height) this.iframeEl.setAttribute('height', this.height);
this.$el.appendChild(this.iframeEl);
this.setIframeUrl();
},
listenForEvents () {
// Create IE + others compatible event handler
const eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
const events = window[eventMethod];
const messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
// Listen to message from child window
events(messageEvent, event => {
if (event.data === this.iframeLoadedMessage) {
this.$emit('iframe-load', event.data);
this.iframeEl.setAttribute('style', 'visibility: visible; border: none;');
}
if (event.data === this.iframeOnReadyStateChangeMessage) {
this.$emit('load', this.iframeEl);
}
}, false);
}
},
created () {
this.listenForEvents();
this.initIframe();
},
watch: {
src: {
immediate: true,
handler() {
this.reinitIframe();
}
}
},
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
const options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
let hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
function createInjectorSSR(context) {
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
if (!context)
return () => { };
if (!('styles' in context)) {
context._styles = context._styles || {};
Object.defineProperty(context, 'styles', {
enumerable: true,
get: () => context._renderStyles(context._styles)
});
context._renderStyles = context._renderStyles || renderStyles;
}
return (id, style) => addStyle(id, style, context);
}
function addStyle(id, css, context) {
const group = process.env.NODE_ENV === 'production' ? css.media || 'default' : id;
const style = context._styles[group] || (context._styles[group] = { ids: [], css: '' });
if (!style.ids.includes(id)) {
style.media = css.media;
style.ids.push(id);
let code = css.source;
if (process.env.NODE_ENV !== 'production' && css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
Buffer.from(unescape(encodeURIComponent(JSON.stringify(css.map)))).toString('base64') +
' */';
}
style.css += code + '\n';
}
}
function renderStyles(styles) {
let css = '';
for (const key in styles) {
const style = styles[key];
css +=
'<style data-vue-ssr-id="' +
Array.from(style.ids).join(' ') +
'"' +
(style.media ? ' media="' + style.media + '"' : '') +
'>' +
style.css +
'</style>';
}
return css;
}
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "vue-iframe" }, [])
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
const __vue_inject_styles__ = function (inject) {
if (!inject) return
inject("data-v-5e8f010a_0", { source: ".vue-iframe {\n height: 100%;\n width: 100%;\n}\n.vue-iframe iframe {\n height: 100%;\n width: 100%;\n}\n", map: {"version":3,"sources":["vue-iframe.vue"],"names":[],"mappings":"AAAA;EACE,YAAY;EACZ,WAAW;AACb;AACA;EACE,YAAY;EACZ,WAAW;AACb","file":"vue-iframe.vue","sourcesContent":[".vue-iframe {\n height: 100%;\n width: 100%;\n}\n.vue-iframe iframe {\n height: 100%;\n width: 100%;\n}\n"]}, media: undefined });
};
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = "data-v-5e8f010a";
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject shadow dom */
const __vue_component__ = /*#__PURE__*/normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
undefined,
createInjectorSSR,
undefined
);
// expose component and service to global scope
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use({
install(Vue) {
Vue.component('vue-iframe', __vue_component__);
}
});
}
var index = {
install(Vue) {
Vue.component('vue-iframe', __vue_component__);
},
VueIframe: __vue_component__
};
module.exports = index;