资源中心项目中遇到的问题,调用第三方预览插件,文档中如果有链接,用户点击在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
}
}