Vue
<template>
<!--显示框-->
<el-container>
<iframe :src="showPageUrl"
width="100%"
frameborder="0"
ref="iframe">
</iframe>
</el-container>
</template>
<script>
export default {
name: "others",
data() {
return {
showPageUrl: 'http://www.csi.ac.cn/',
iframe: null,
}
},
methods: {
changeUrl(urlVal) {
this.showPageUrl = urlVal;
this.loading = true;
},
handleLoad(value) {
// 逻辑怎么写
}
}
},
mounted() {
// 这里就拿到了iframe对象
this.iframe = this.$refs.iframe
// 添加onload的监听,并且绑定处理函数handleLoad
this.iframe.addEventListener('load', this.handleLoad)
}
}
</script>
上面是正常情况
特殊情况
- http://www.bjdzj.gov.cn/
此网页可正常访问,但无法渲染,报错:Refused to display 'http://www.bjdzj.gov.cn/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. - 404:随便写个不存在的网址就行
以上两种情况在需求中均算错误,
需求:
获取触发监听的onload事件,此项已完成
获取页面是否成功渲染信息,并区分【成功获取并成功渲染、成功获取但渲染失败、获取失败】,此项未完成