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...