javascript - 如果原始 src 无法加载内容并超时，则 iframe 使用替代图像

Question

我有一个 iframe 标签，它从 url 加载图像。有没有一种方法可以在我的网址不起作用时使用备用图片？ (托管图像的服务器已关闭，几秒钟后返回“url 响应时间过长。ERR_CONNECTION_TIMED_OUT”)。

应该在图片标签中使用类似于“alt”的功能，但 iframe 没有。

<iframe
        frameborder="0" style="border:0;height:410px;"
        src="myurl">
</iframe>

Answer 1

    <script type="text/javascript">

    var reader = new XMLHttpRequest();
    var checkFor = "link1"; //Add the first link
    var second = "link2"; //Add the alternative

    reader.open('get', checkFor, true);
    reader.onreadystatechange = checkReadyState;

    function checkReadyState() {
        if (reader.readyState === 4) {
            if ((reader.status == 200) || (reader.status == 0)) {
            document.getElementById('site').src =  checkFor;
            }
            else {
           document.getElementById('site').src = second;
            return;
            }
        }
    }
    reader.send(null);
</script>

<iframe id="site" src=""></iframe>

来源:How to Check if URL exists using javascript