Description
Dynamic asnyc iframes are a technique for creating non-blocking, super fast loading iframes. Fast loading iframes are essential for building embedded widgets.
For a full description of dynamic asnyc iframes take a look at this article written by Aaron Peters: http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance?%3E#dynamic
Installation
npm install vue-friendly-iframe --save-dev
1) Download from NPM
Usage
1) Register the Vue Friendly Iframe component:
import Vue from 'vue';
import VueFriendlyIframe from 'vue-friendly-iframe';
Vue.component('vue-friendly-iframe', VueFriendlyIframe);
2) In your HTML add the component:
<vue-friendly-iframe :src="example1Form.src" @load="onLoad" @document-load="onDocumentLoad"></vue-friendly-iframe>
Events
Events are emitted from the component so you can hook into the iframe's load event and the inner document onreadystatechange event.
<vue-friendly-iframe :src="example1Form.src" @load="onLoad" @document-load="onDocumentLoad"></vue-friendly-iframe>
Example
Iframe loading...
Iframe finished loading
Inner document loading...
Inner document finished loading
iframe loading...