iframe 详解-在vue中使用
2021/9/5 23:07:02
本文主要是介绍iframe 详解-在vue中使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
上代码:定义,触发方式,可以通过按钮或加载来实现,根据实际需求来控制
<template> <div class="main-info"> <iframe ref="iframe" id="iframe" frameborder="0" :src="iframeSrc" > </iframe> </div> </template> mounted () { const self = this // 适配IE this.$nextTick(() => { const iframe = document.getElementById('iframe') if (iframe.attachEvent) { iframe.attachEvent('onload', function () { setTimeout(() => { self.clickIframe() self.handlePostMessageFail() }, 1000) }) } else { iframe.onload = function () { setTimeout(() => { // 坑一,postMessage发送通知时,可能对方的页面还没有加载完成导致发送失败 self.clickIframe() self.handlePostMessageFail() }, 1000) } } }) },
data () { return { iframeSrc: '', iframe: '', isReceiveMsg: false, // 是否收到消息 actionNum: 5, // 最多执行5次 timer: null,// 定时器 } },
处理失败机制
// postMessage消息发送失败机制,上面定义执行5次,第隔1.5秒,之前设置3次,间隔一秒,还是有失败的,所以这里采用这个,待完善 handlePostMessageFail () { this.timer = setInterval(() => { if (this.jumpStatus !== '2-1' && !this.isReceiveMsg) { if (this.actionNum <= 0) { clearInterval(this.timer) this.timer = null this.isReceiveMsg = true return } this.clickIframe() this.actionNum-- } else { clearInterval(this.timer) this.timer = null this.isReceiveMsg = true } }, 1500)
这篇关于iframe 详解-在vue中使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略