如果 iframe 未从 URL 加载，则加载缩略图答案

【问题标题】：Load a thumbnail image if iframe doesn't load from URL如果 iframe 未从 URL 加载，则加载缩略图
【发布时间】：2012-09-19 12:17:34
【问题描述】：

我有一个从 CartoDB 加载地图的 iframe。

<iframe src='https://recology.cartodb.com/tables/condma_1_cleaned/embed_map' width='900' height='600'></iframe>

此 iframe 嵌入在 html 演示文稿中。当我做演示时，可能没有互联网。在这种情况下，如果可以加载地图的屏幕截图，那就太好了。

当加载实时版本由于缺乏互联网访问而失败时，如何获取要加载的地图屏幕截图？

【问题讨论】：

第一个障碍是检测加载失败，请参阅(1)，(2) - 然后您只需将 iframe 替换为相同尺寸的 img。使用 jQuery 使用 .replaceWith() 命令很容易。
谢谢，正在研究该解决方案。

标签： html

【解决方案1】：

借用this 上的答案，您可以执行以下操作：

<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script id="iframe_loader">
function loadIframe() {
  var iframe_element = document.getElementById('iframe_id');
  if (navigator.onLine) {
    iframe_element.src = 'www.CartDB_url.com';
  } else {
    iframe_element.src = '/local_version_CartDB.htm';
  }
}
</script>

然后在您关闭网站末尾的 BODY-tag 之前放入

<script>
  loadIframe();
</script>

【讨论】：

谢谢。试过这个，它只是一次加载我所有的幻灯片。我使用deck.js。有什么想法吗？
我的幻灯片在这个github repo的index.html文件中
我已经在 pull request 中为你添加了代码，现在你可以再看看如何做 :)