Vue给iframe设置嵌套页面的宽高

Vue给iframe设置嵌套页面的宽高,代码示例如下:

<template>
    <iframe id="iframe" :height="scrollHeight" :width="scrollWidth" frameborder=0 allowfullscreen="true"
        src="/docs-html/xxx.html" ref="iframe" scrolling=auto></iframe>
</template>

<script>
export default {
    data() {
        return {
            scrollWidth: 1000,
            scrollHeight: 1000,
        }
    },
    methods: {
        getScrollWidthAndHeight() {
            let iframe = document.getElementById("iframe");
            let doc = iframe.contentDocument || iframe.document;
            this.scrollWidth = doc.documentElement.scrollWidth;
            this.scrollHeight = doc.documentElement.scrollHeight + 50;
        }
    },
    mounted() {
        var _this = this
        const iframe = document.querySelector('#iframe')
        // 处理兼容行问题
        if (iframe.attachEvent) {
            iframe.attachEvent('onload', function () {
                // iframe加载完毕以后执行操作
                console.log('iframe已加载完毕')
                _this.getScrollWidthAndHeight()
            })
        } else {
            iframe.onload = function () {
                // iframe加载完毕以后执行操作
                console.log('iframe已加载完毕')
                _this.getScrollWidthAndHeight()
            }
        }
    }
}
</script>
<style scoped>

</style>

 

posted @ 2024-03-01 10:10  罗毅豪  阅读(172)  评论(0编辑  收藏  举报