阿狗工具

项目要求：

通过按钮点击事件，使用iframe来显示不同的内容（跨域）。

问题：

iframe链接内容的服务器未开启的时候，页面显示404， 用户体验太差。

要求：

服务器未开启的时候，显示页面需要友好。

解决办法：通过计算iframe的加载内容的时间，做超时判断，如果5s内未加载完成，就认为此时iframe链接的服务器未开启； 未开启的情况下，给iframe上层覆盖个div（内容自定义）。这样既可实现界面友好。

风险： 存在。但是目前我未找到更好的办法去解决这个问题

代码如下：

btnclick(elem){
   this.fullscreenLoading_all = true;  //显示加载框
   this.ajaxError = false; 
   if(elem.URL == this.ifram_src){
         this.fullscreenLoading_all = false;
         return false;
   }
   //等到iframe数据加载出来之后再进行关闭加载框
   let elurl = elem.URL;
   this.ifram_src = elurl;
   this.$nextTick(() => {
      const iframeElem = this.$el.querySelector("#iframe_id")；
     //5s iframe 无任何加载内容，就任务iframe加载的连接的服务器未连接
      this.serveTime = setTimeout(() => {
           this.ajaxError = true;
           this.fullscreenLoading_all = false;
      }, 5 * 1000);

      if(iframeElem.attachEvent){
         iframeElem.attachEvent('onload', () => {
             clearTimeout(this.serveTime)；
             this.fullscreenLoading_all = false;
         })
      }else{
         iframeElem.onload = () => {
             clearTimeout(this.serveTime);
             this.fullscreenLoading_all = false；
         }
      }
 })
},

其中注意：

1. 要有加载框： 如果没有加载框，在疯狂且快速点击按钮进行iframe 的url 属性值切换的时候，会导致代码中的setTimeout的时间缩短； 导致判断失误
2. 点击同一个按钮，加载的iframe内容相同，iframe的 url 值不变的情况下，也就是下面这个判断：

if(elem.URL == this.ifram_src){
         this.fullscreenLoading_all = false;
         return false;
   }

一定要使用returan false ; 不要让代码再进行执行了。

以上全部。 如果更好的办法解决，请留言。