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 } }, computed: { ...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>
Advertisement
Answer
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!