The function bound to (@load="myFunction") fires once when the iframe is created and once when it's actually loaded.

Why does it fire when the iframe is created, and how to avoid it?

<template>
  <transition name="modal">
    <div v-if="webviewOpen">
      <transition name="content" appear>
        <div v-if="webviewOpen">
            <transition name="iframe">
            <iframe
              v-show="showIframe"
              :src="webviewUrl"
              @load="iframeIsLoaded"
            />
          </transition>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {
      showIframe: false
    }
  },
  puted: {
    ...mapState({
      webviewOpen: state => state.webview.open,
      webviewUrl: state => state.webview.url
    })
  },
  watch: {
    webviewOpen () {
      setTimeout(() => {
        this.showIframe = true
      }, 1000)
    }
  },
  methods: {
    iframeIsLoaded () {
      console.log('iframe loaded')
    }
  }
}
</script>

The function bound to (@load="myFunction") fires once when the iframe is created and once when it's actually loaded.

Why does it fire when the iframe is created, and how to avoid it?

<template>
  <transition name="modal">
    <div v-if="webviewOpen">
      <transition name="content" appear>
        <div v-if="webviewOpen">
            <transition name="iframe">
            <iframe
              v-show="showIframe"
              :src="webviewUrl"
              @load="iframeIsLoaded"
            />
          </transition>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {
      showIframe: false
    }
  },
  puted: {
    ...mapState({
      webviewOpen: state => state.webview.open,
      webviewUrl: state => state.webview.url
    })
  },
  watch: {
    webviewOpen () {
      setTimeout(() => {
        this.showIframe = true
      }, 1000)
    }
  },
  methods: {
    iframeIsLoaded () {
      console.log('iframe loaded')
    }
  }
}
</script>

• javascript
• vue.js
• iframe

• We need more code. The problem is elsewhere. This code loads only once for me. – tauzN Commented Apr 27, 2021 at 19:48
• 1 Still only console.logs once for me – tauzN Commented Apr 27, 2021 at 20:26
• stackoverflow./a/15880489/871404 clearly this problem is faced by many people. I tried this answer and it doesn't work for me. – drake035 Commented Apr 28, 2021 at 12:13
• @drake035, It is clearly not happening in latest Chrome, using Vue 2.6.12. Provide a minimal reproducible example specifying at least one browser in which it happens. Without a way to reproduce, nobody can provide a fix. Most likely something else (layout structural directives e.g v-if, v-for) is causing your <iframe> to be removed from DOM and then added again. What you have posted so far cannot be tested. – tao Commented May 5, 2021 at 2:59
• 1 A wild guess here is your ponent starts with a truthy value for webviewOpen, which is swiftly (possibly in mounted()) changed to a falsy value. This could cause the <iframe> to fire @load before the execution of mounted(), if the src is falsy at that point - as it doesn't take any time to load. Obviously, the @load will fire again when you switch webviewOpen to a truthy value later on. This is pure speculation, since you haven't provided a way to repro, hence test. But if the assumption is true, initializing webviewOpen as falsy would fix it. – tao Commented May 5, 2021 at 12:18

3 Answers 3

It seems it may be a web kit issue with firing twice ( safari/chrome ) as it fires when added to DOM (v-if on parent) and when the content is loaded. It may help to add .once modifier to the @load.once="myFunction()"

As @tao suggested something else was interefering, namely Nuxt Lazy Load package. So if anyone uses this package AND finds out iframes onload event mysteriously fires twice AND finds this thread:

Add iframes: false in your nuxt.config.js when importing the package inside the modules section. Problem solved!

We know from your linked answer that Chrome shows this issue unless you attach the listener after the iframe is appended to the DOM. To do this, we could take advantage of Vue's lifecycle hooks. We want it to happen after the iframe is added to the DOM, but before it has a chance to load, so we'll use the updated hook.

I don't experience the problem in any of my browsers, so I unfortunately can't really test it for you. Test for yourself and see if something like this fixes it for you:

<template>
  <label for="show">Show iFrame</label>
  <input id="show" type="checkbox" v-model="webviewOpen">
  <div v-if="webviewOpen">
    <iframe
      src="https://testwebsite./"
      @load="iframeLoadHelper"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      webviewOpen: false,
      iframeReady: false
    };
  },
  methods: {
    // Helper method, just to keep 'if' outside of the logic of your potentially
    // plex @load method
    iframeLoadHelper() {
      if (this.iframeReady) return this.iframeLoaded();
      else return; // do nothing
    },
    // The real load method
    iframeLoaded() {
      console.log('iframe loaded');
    }
  },
  updated() {
    console.log('changing ready-state');
    this.iframeReady = this.webviewOpen;
  }
};
</script>

<style>
:root { font-family: sans-serif; }
</style>