Vuejs-Vue friendly iframe 0.20.0: vue-friendly-iframe - A Vue js component for creating super fast loading, non-blocking iframes.

icon
Latest Release: 0.20.0

merge sandbox pr, update and release

Source code(tar.gz)
Source code(zip)

vue-friendly-iframe

Vue js component for creating dynamic async iframes based on Aaron Peter's article: http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance?%3E#dynamic

npm version

Documentation

https://officert.github.io/vue-friendly-iframe

Demo

https://officert.github.io/vue-friendly-iframe

Requirements

Installation

Vue Support

Supports on Vue >= 2

Installation and Usage

npm install vue-friendly-iframe --save-dev
import VueFriendlyIframe from 'vue-friendly-iframe';

Vue.component('vue-friendly-iframe', VueFriendlyIframe);

Contributing

Pull requests are welcome, or open up an issue if you have ideas for additional functionality, new features or bugs.

Comments

  • iPaper integration issue
    iPaper integration issue

    Jul 17, 2020

    Excellent component, it has helped me a lot, but I have a problem, more a lacking of technical knowledgment.

    I'm embedding a Flipbook's iPaper iframe where I wanna display a PDF. iPaper documentation explains that there is an onSpreadChange event that allows me to know changes for each button pressed (each actions, in fact), and there is no problem. Issue i'm talking about is iPaper has an API that allows me to programmatically communicate with the iframe. This is not working with the component itself. I have already tried all the possible options, but I could not find the correct solution (postMessage API included).

    An example is changing the PDF pages by calling iPaperAPI.goToNextPage(). If I use the normal iframe tag it works perfectly, but with the component it doesn't. Can you give me an idea of ​​how I can make iPaperAPI listenable by component?

    I have read this issue too but no clue with this.

    <vue-friendly-iframe ref="frame"
       src="https://demo.ipaper.io/"
       @load="onLoad"
       @iframe-load="onIframeLoad"
       @onSpreadChange="apiReady"
       frameborder="0"
       gesture="media"
       allowfullscreen
    ></vue-friendly-iframe>
    
    <v-btn @click="start">Next Page</v-btn>
    
    <script>
    export default {
      name: 'HelloWorld',
    
      data: () => ({
        iframeLoading: true
      }),
      methods: {
        apiReady: function($event) {
          console.log($event)
        },
        start: function() {
          console.log(this)
          iPaperAPI.goToNextPage() //<-- Doesn't works with component
        },
        onLoad: function() {
          console.log('iframe loaded')
          console.log(this.$refs.frame)
          this.iframeLoading = false
        },
        onIframeLoad: function() {
          console.log('iframe loaded')
        }
      }
    }
    </script>
    

    Thanks in advance!

    Reply
  • Load local HTML files in Vue ?
    Load local HTML files in Vue ?

    Nov 11, 2020

    How can I load local HTML?

    image

    Reply
  • typescript
    typescript

    Feb 26, 2021

    Perhaps typescript support? I'm not that good at writing shims.

    Reply
  • Help with scrolling
    Help with scrolling

    Apr 8, 2021

    Good Evening,

    How can I remove the scroll from the iframe? All the attempts I made didn't work

    my code: <vue-friendly-iframe :src="linkIteris" className="iteris"></vue-friendly-iframe>

    Reply
  • load pdf in mobile
    load pdf in mobile

    Apr 14, 2021

    I have a problem when I load a pdf in a mobile If I use Chrome-inspector in mobile view everything works fine but with same link in a mobile (iPhoneX) only the first page loads and the size not fit Computor image iPhone image

    <div class="default-screen"><div><div class="text-center"><button type="button" class="btn-attachment-view-close v-btn theme--light elevation-0 v-size--default"><span class="v-btn__content"> STÄNG </span></button></div><div class="iframe-wrapper" style="height: 812px; width: 375px; max-width: 600px;"><div class="vue-friendly-iframe" frameborder="0" gesture="media" allowfullscreen="allowfullscreen" style="height: 812px; width: 375px; max-width: 600px;"><iframe style="visibility: visible; border: none;" iframe-src="https://infoping.net/REST2/2.pdf" crossorigin="anonymous" target="_parent"></iframe></div></div></div></div>

    any ideas?

    Reply
  • Usage steps
    Usage steps

    Jun 7, 2021

    I followed the usage steps but the iframe is still not rendering,

    Which file in project should I add the "Vue.use(VueFriendlyIframe);" step.

    Reply
  • target attribute is useless
    target attribute is useless

    Jul 29, 2021

    looking at MDN docs for iframe, there is no target attribute listed.

    Is target option in vue-friendly-iframe useless? if yes, it should be removed since it is misleading.

    Reply
  • add support for `onload` function
    add support for `onload` function

    Jul 29, 2021

    Right now vue-friendly-iframe exposes load and iframe-load events. however both of those event are triggered before the document from src url is loaded. I was testing both in chrome and firefox with vue-friendly-iframe, I had my server take 3 seconds before returning html but vue-friendly-iframe was triggering both of those events right away.

    In the end I ended up having an onload listener set on iframe and that worked well. I suggest refactoring load event to be triggered after src loads. Looking at the code it seems that if we add event listener for load after iframeDoc.close(); //iframe onload event happens line, then it should work correctly.

    I can try to submit a PR if you agree with this approach.

    Basically this would be the new setIframeUrl() method:

        setIframeUrl() {
          if (this.iframeEl.contentWindow === null) {
            setTimeout(this.setIframeUrl)
            return;
          }
          const iframeDoc = this.iframeEl.contentWindow.document;
          iframeDoc.open()
            .write(
              `
              <body onload="window.location.replace('${this.src}'); parent.postMessage('${this.iframeLoadedMessage}', '*')"></body>
              `
            );
          iframeDoc.close(); //iframe iframe-load event happens
          const vm = this;
          this.iframeEl.addEventListener("load", (e) => {
              vm.$emit('load');
          });
    
    Reply
  • Vue 3 Support
    Vue 3 Support

    Aug 16, 2021

    Hello,

    im not quit sure if Vue 3 is supported yet , but i get the following error:

    image

    the component it self looks like this:

    image

    Reply
  • Content Security Policy (CSP) requires allowing 'unsafe-inline'
    Content Security Policy (CSP) requires allowing 'unsafe-inline'

    Dec 6, 2021

    Hello. This is a useful plugin for my needs but there is one issue I am wondering about. We are looking at applying a Content Security Policy (CSP) header to our Vue app. However this component requires use of inline script and style, thus we have to put 'unsafe-inline' in our CSP. As far as I can tell vue-friendly-iframe is the only place in our app that needs it. We use iframe to display another older component within our system inside a Vue component.

    I'm not an expert in this but I'm wondering if something can be done in vue-friendly-iframe to avoid the use of inline scripting to build the iframe content. I'm talking about stuff like this:

    iframeDoc.open().write('\n          <body onload="window.location.replace(\'' + this.src + '\'); parent.postMessage(\'' + this.iframeLoadedMessage + '\', \'*\')"></body>\n          <script>\n            window.document.onreadystatechange = function () {\n              if (window.document.readyState === \'complete\') {\n                parent.postMessage(\'' + this.iframeOnReadyStateChangeMessage + '\', \'*\')\n              }\n            };\n          </script>\n          ');
    

    Do you think there's any feasible means to avoid building things inline like this? Thanks!

    Reply
  • How can i receive a message from the iframe?
    How can i receive a message from the iframe?

    Apr 25, 2019

    This is great. Very helpful. I need to intercept a message from the page in the iframe. I was using window.addEventListener on the iframe. Is there a better way to handle this with this component?

    Reply
  • use as global
    use as global

    Jul 24, 2020

    how do i register as global and CDN?

    Reply
  • Add support for iframe title attributes, for accessibility
    Add support for iframe title attributes, for accessibility

    Jun 9, 2020

    This PR would solve issue #25.

    Reply
  • Adding delay to ensure the contentWindow has been loaded and set
    Adding delay to ensure the contentWindow has been loaded and set

    Jan 17, 2020

                                                                                                                                                                                                           
    Reply
  • Can't set attributes to iframe
    Can't set attributes to iframe

    Apr 8, 2019

    Tried this code,

     <div v-for="(floorPlan,index) in floorPlans">
                            <vue-friendly-iframe class="floor-plan-iframe"
                                                 frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen :src="floorPlan.iframe_url" :ref="'iframeContent_'+index">
                                Your browser doesn't support iframes.
                            </vue-friendly-iframe>
                        </div>
    

    But the out put is like,

    <div data-v-1a3ed9ee="" class="vue-friendly-iframe floor-plan-iframe" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen="allowfullscreen">
    <iframe crossorigin="anonymous" target="_parent" style="visibility: visible;">
    </iframe>
    </div>
    

    The attributes class="vue-friendly-iframe floor-plan-iframe" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen="allowfullscreen" were should have been with the <iframe> tag instead of the parent <div>

    Reply
  • src doesn't update when bound link changes
    src doesn't update when bound link changes

    Jul 10, 2018

    Hi,

    Thanks for this component, it works great with a static source link. It just doesn't seem to update when the data or props are updated. Am I missing something here? I know that the link I'm passing to props is updating because I'm rendering it to the page above the iframe.

    Update: Vue devtools shows the correct src link associated with <FriendlyIframe>, it just doesn't render correctly. Are you using lifecycles to handle the update?

    <vue-friendly-iframe :src='link' className='frame'></vue-friendly-iframe>

    Any help is great. Thanks!

    Reply
  • Issue #20, fix firefox's back button
    Issue #20, fix firefox's back button

    May 4, 2020

    Proposed fix for Firefox's issue https://github.com/officert/vue-friendly-iframe/issues/20

    Reply
  • css problem
    css problem

    Aug 23, 2018

    HI, Thank you for this great component. I am just not sure how to set style or class to the iframe, like "width:800px;height:1000px". Thank you for your help!

    Reply
  • Set width and height of iframe
    Set width and height of iframe

    Jul 23, 2018

    Hi,

    First of all nice work on the friendly Iframe!

    I'm generating multiple iframes with a different width and height (loaded from a database). I was wondering if it is possible to set the width and height for every iframe?

    I've been trying to pass the width and height as props on the vue-friendly-iframe component but it's not working so far. Do you have any tips on implementing this? :)

    Thanks!

    Reply
  • Is there any way to know when the page fetching is done?
    Is there any way to know when the page fetching is done?

    Feb 1, 2019

    It could be great if we could have something like this:

    <vue-friendly-iframe
        :src="path/to/external.com"
        @finish="handleLoading"
    />
    
    methods: {
        handleLoading() {
            console.log('External link loaded. Do something');
        }
    }
    
    Reply