判断iframe加载成功与否

在开发素材库时，有一种素材是链接素材。在用户打开链接素材的时候，会将链接放到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内网页的内容就会覆盖错误提示背景。