vue.js判断ifreame是否加载完成

VUE加载iframe完成项目中做详情页，用到了iframe引入界面，进入页面会有加载，体验不好；加了个遮罩层，但需要判断iframe加载事件iframe自带load方法，在iframe加载完成后执行直接上代码：<html><iframe id="show-iframe" frameborder="0" name="showHere" scrolling="au...

loongqiao

2964人浏览 · 2019-08-21 14:26:08

loongqiao · 2019-08-21 14:26:08 发布

VUE加载iframe完成

项目中做详情页，用到了iframe引入界面，进入页面会有加载，体验不好；加了个遮罩层，但需要判断iframe加载事件

iframe自带load方法，在iframe加载完成后执行

直接上代码：

<html>
	<iframe id="show-iframe" frameborder="0" name="showHere" scrolling="auto" src="" style="width: calc(100% + 19px)"></iframe>
<script>
	export default {
	mouted () { this.Test(data)},
	methods:{
		Test(data) {
			const oIframe = document.getElementById('show-iframe')
                oIframe.style.height = '100%'
                oIframe.srcdoc = data  //这个data是直接返的html代码
                const vm = this
                if (oIframe.attachEvent) {
                    oIframe.attachEvent('onload', function () {
                        vm.textLoading = false
                    })
                } else {
                    oIframe.onload = function () {
                        vm.textLoading = false
                    }
                }
		}
}
}    
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^