iframe屏蔽内部超链接点击(iframe onload)

资源中心项目中遇到的问题,调用第三方预览插件,文档中如果有链接,用户点击在iframe内部或者在父级页会打开新页面,需要屏蔽掉,网上的教程大多是去掉超链接,加遮罩之类的,初级解决方案的确是加了一个遮罩,但是后来发现当用平板去预览的时候,用户可以通过点击到iframe内部,再通过上下左右键盘的方式去选择超链接,从而跳走(带有键盘的平板),后续打开直播网页,观看直播的问题

iframe的诸多属性尝试后发现都不能解决问题,包括sandbox的几个属性值

由于是非同源页面,内部页面的window也是获取不到的,其location.href的变化也捕获不到,如果是同源页面,或者同顶级域名下的页面,可操作性就很大了,设置document.domain的形式转化为同源页面,或者给其绑定页面离开事件,通知父页面,作出警告并重置父页面即可

后续研究发现内部location.href变化会重新触发iframe的onload事件根据这个特性最终解决了这个问题

解决方案

<iframe v-if='iframeUrl != null' id="frame1" @load='iframeLoad' :src="iframeUrl"></iframe>

data(){ // 组件data中定义一个iframeLoaded属性
	iframeLoaded: false
}

iframeLoad(){
  if(this.iframeLoaded == true){
       this.iframeLoaded = false
       let frameUrl = this.iframeUrl
       this.iframeUrl = null
       this.$nextTick(()=>{
           this.iframeUrl = frameUrl
       })
   }else{
       this.iframeLoaded = true
   }
}
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值