在开发素材库时,有一种素材是链接素材。在用户打开链接素材的时候,会将链接放到iframe中显示。但事情总不尽如人意,有时候会出现以下问题:

  • iframe中访问https://www.baidu.com,发现打不开,原因是百度为了防劫持,而在响应中设置了阻止iframe显示自己网页的字段。
  • 用户有可能填写的是错误的网址,这个网址会导致iframe无法显示。
  • 因此我们需要监听iframe加载失败,从而提示用户。然而iframe只有onload事件:

    iframe.onload = () => {
      try {
        // iframe是否加载成功
        // 如果没有加载成功,下面的代码会报错
        // (不要删掉console.log(),否则会失效)
        console.log(iframe.contentWindow);
      } catch (e) {
        console.log("exception = ", e);
    

    本来希望上面的代码能够达到监听网页加载失败的问题,但又出现了新问题,如果链接地址能够打开,且链接与当前h5不在同一个域,同样会在读取iframe.contentWindow时报错。

    最后妥协的办法是,给在捕获异常时,给iframe设置一个失败提示背景,如果iframe中的网页确实错误,则会显示这个错误提示背景,而如果iframe中的网页是正确的,只是与当前网页不在同一个域,那么iframe内网页的内容就会覆盖错误提示背景。