如何使用角度检查 iframe 内的内容是否已完全加载并且 src url 是否未关闭（404/不可用）？答案

【问题标题】：How can I check if the contents inside an iframe is fully loaded and the src url is not down(404/not available) using angular?如何使用角度检查 iframe 内的内容是否已完全加载并且 src url 是否未关闭（404/不可用）？
【发布时间】：2020-03-31 03:21:37
【问题描述】：

我有一个 Angular 应用程序，它有一个 iframe，可以从外部 url 加载聊天机器人。我需要检查 url 是否已完全加载并且 url 没有关闭。

iframe 最初不会在 dom 上加载，仅在用户单击图标后才加载。由于 iframe 需要一些时间来加载，所以 iframe 空间将是空的。我尝试通过将其设置为背景来显示加载器到包含 iframe 的 div，但即使在 iframe 加载后，加载程序也一直在运行。

有人可以指导我吗？我是 angular 新手。我正在使用 angular 5.TIA

【问题讨论】：

我认为您使用的网址在加载时可能正在广播事件，您可以收听该事件。
developer.mozilla.org/en-US/docs/Web/API/Window/postMessage 如果您尝试用自己的 iframe 内容进行黑白通信，这可能会很有用。

标签： javascript angular reactjs iframe angular5

【解决方案1】：

最简单的方法是检查 iframe 上的 onload 事件。 Document 类型的 ContentDocument，只读，检查此框架是否包含，如果有且可用，否则将返回 null。

//Get reference of the iframe with reference variable and call
// onload event on it
iframe.onload = function(){
   var that = $(this)[0];
   try{
        that.contentDocument;
   }
   catch(err){
        //TODO 
   }
}

【讨论】：