如果给iframe的网页渲染失败，怎么得知(语言-javascript)

Question

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>

上面是正常情况

特殊情况

1. http://www.bjdzj.gov.cn/
   此网页可正常访问，但无法渲染，报错：Refused to display 'http://www.bjdzj.gov.cn/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
2. 404：随便写个不存在的网址就行

以上两种情况在需求中均算错误，

需求：

• 获取触发监听的onload事件，此项已完成

• 获取页面是否成功渲染信息，并区分【成功获取并成功渲染、成功获取但渲染失败、获取失败】，此项未完成

Answer 1

通过以下两种方法可以判断是否渲染完成

var iframe = document.createElement("iframe");
iframe.src = "http://www.baidu.com/";

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert("框架加载完毕.");
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == "complete"){
            alert("框架加载完毕.");
        }
    };
}

document.body.appendChild(iframe);

//方法二
var iframe = document.createElement("iframe");
iframe.src = "http://www.baidu.com/";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

document.body.appendChild(iframe);