判断iframe加载成功与否

发布时间 2023-07-23 21:41:16作者: hdxg

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