首页 > 其他分享 >Vue给iframe设置嵌套页面的宽高

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

时间:2024-03-01 10:11:37浏览次数:22  
标签:scrollWidth Vue getScrollWidthAndHeight 嵌套 iframe document 加载

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: 200,
            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;
        }
    },
    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>

 

标签:scrollWidth,Vue,getScrollWidthAndHeight,嵌套,iframe,document,加载
From: https://www.cnblogs.com/luoyihao/p/18046358

相关文章

  • Vue 3.0 Class与Style绑定
    操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js做了专门的增强。表达式结果的类型......
  • vue3——环境变量的配置
    vue3环境变量的配置开发环境(development)测试环境(testing)生产环境(production)项目根目录分别添加开发、生产和测试环境的文件!.env.development.env.production.env.test文件内容变量必须以VITE_为前缀才能暴露给外部读取NODE_ENV='development'VITE_APP_TITLE=......
  • Vue 3.0 介绍
    #Vue.js是什么Vue(读音/vjuː/,类似于 view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,V......
  • Vue 3.0 应用&组件实例
    #创建一个应用实例每个Vue应用都是通过用 createApp 函数创建一个新的应用实例开始的: constapp=Vue.createApp({/*选项*/})  该应用实例是用来在应用中注册“全局”组件的。我们将在后面的指南中详细讨论,简单的例子: constapp=Vue.createApp({})ap......
  • Vue 3.0 Data Property和方法
    #DataProperty组件的 data 选项是一个函数。Vue在创建新组件实例的过程中调用此函数。它应该返回一个对象,然后Vue会通过响应性系统将其包裹起来,并以 $data 的形式存储在组件实例中。为方便起见,该对象的任何顶级property也直接通过组件实例暴露出来: constapp=V......
  • Vue 3.0 模板语法
    Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层组件实例的数据。所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应性系统,Vue能够智能地计算出最少需要重新渲......
  • Vue 3.0 计算属性和侦听器
    #计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如,有一个嵌套数组对象: Vue.createApp({data(){return{author:{name:'JohnDoe',books:['Vue2-AdvancedGuide','Vue3-Basic......
  • 前端学习-vue视频学习003-setup(重要)
    学习教程-尚硅谷视频将原vue2的格式改为vue3---使用setup要点:this在vue3中被弱化,setup函数中不能使用this定义数据时,如果不是响应式的(暂时还不是很理解响应式),不会触发页面的变化vue3支持一个标签直接写多次,如<template><Person/><Person/><Person/></t......
  • selenium处理iframe
    -如果定位的标签在iframe中,需要先切换到iframe中-切换到iframe:driver.switch_to.frame('iframe的id属性值')-动作链(拖动):fromselenium.webdriverimportActionChains-实例化一个动作链对象-执行一系列的动作链操作-调用perform()方法执行链中的所......
  • JS/Vue 学习小记
    可能要写点轮子。。。先学学前端知识吧,记录一下。遍历:for(letiofS){i...}for(letiinS){S[i]...}JS是弱类型的语言。目前感觉到的特性有:数组不同元素可以是不同类型的函数返回值不需要声明,直接functionF()就可以JS中对象用大括号表示,成员可以是各种类型,包......