iframe-vue.vue

iframe-vue.vue

<template>
    <div class="container">
        <div id="editor" ref="editor">HTML TABLE HERE</div>
        <div class="my-3 my-md-5">
            <div id="iframe-wrapper"
                 :style="iframe.wrapperStyle">
                <iframe 
                    v-if="loaded"
                    :src="this.url.products"
                    :style="iframe.style"
                    :height="iframe.style.height"
                    :width="iframe.style.width"
                    frameborder="0"
                ></iframe>
            </div>
        </div>
    </div>
</template>

<script>
import VueFrame from 'vue-frame'
export default {
  components: { VueFrame },
  data () {
    return { 
        url: {
            products: null
        },
        iframe: {
            style: null,
            wrapperStyle: null,
        }
    }
  },
  mounted () {
    this.loadUrlProduct()

    this.iframe.style = {
        position: 'absolute',
        width: window.innerWidth,
        height: window.innerHeight,
    }    
    
    this.iframe.wrapperStyle = {
        overflow: 'hidden',
        height: editor.clientHeight + "px",
        width: editor.clientWidth + "px",
    } 

    this.loaded = true;
  },
  methods: { 
    loadUrlProduct () {
        axios.get('/pluggtocode?frame=PRODUCTS')
            .then(response => {
                this.url.products = response.data.url
            })
            .catch(console.error)
    }
  }
}
</script>

<style scoped>
    #vue-frame {
        width: 100%;
        position: relative;
    }
</style>