HTML调用refreshIt()无法实现每0.5秒自动更新图片如何解决

存在的问题 #

• refreshIt() 函数仅完成定义，未配置触发逻辑，页面加载后不会自动运行
• 图片更新时使用固定URL，浏览器会复用缓存资源，无法拉取最新的图表内容
• 样式代码存在语法缺陷：通配符选择器缺失、宽度未加单位，会导致布局异常
• 第二、第三个雷达表单提交逻辑存在变量名错误，无法正常设置iframe地址

具体修改点 #

1. 在body标签添加onload="refreshIt()"属性，页面加载完成后自动启动定时刷新
2. 在每张图片的请求URL末尾拼接时间戳参数，规避浏览器缓存
3. 补全CSS通配符选择器*，所有宽度属性添加px单位
4. 修正第二、第三个雷达表单提交逻辑的变量名错误

修复后完整代码 #

<html>
    <head>
        <style>
        * {
            box-sizing: border-box;
        }
        .column {
            float: left;
        }
        .left {
            width: 360px;
        }
        .middle {
            width: 360px;
        }
        .right {
            width: 360px;
        }
        .row:after {
            content: "";
            display: table;
            clear: both;
        }
        </style>
        <script language="JavaScript">
        function refreshIt() {
            if (!document.images) return;
            // 拼接时间戳规避缓存
            const timestamp = new Date().getTime();
            document.images['Chart 1'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185109994&selectionId=1485567&t=" + timestamp;
            document.images['Chart 2'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185191931&selectionId=1222344&t=" + timestamp;
            document.images['Chart 3'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185192198&selectionId=47972&t=" + timestamp;
            setTimeout(refreshIt,500); // 每0.5秒刷新一次
        }
        </script>
    </head>
    <body onload="refreshIt()">
        <div class="row">
            <div class="column left">
                <form action="" method="post" id="url-setter">
                    <input type="text" name="url" id="url" />
                    <button type="submit" name="submit">Radar 1</button>
                </form>
                <iframe id="the-frame" width="347" height="282" src=""></iframe>
                <script type="text/javascript">
                    (function () {
                        "use strict";
                        var url_setter = document.getElementById('url-setter'), url = document.getElementById('url'), the_iframe = document.getElementById('the-frame');
                        url_setter.onsubmit = function (event) {
                            event.preventDefault();
                            the_iframe.src = url.value;
                        };
                    }());
                </script>
                <form method="post" target="imgChart1">
                    <input type="submit" value="Chart 1" />
                    <input type="text" id="ChartBar1" name="ChartBar1" style="width: 286px;"><br>
                </form>
                <img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 1">
            </div>
            <div class="column middle">
                <form action="" method="post" id="url-setter2">
                    <input type="text" name="url2" id="url2" />
                    <button type="submit" name="submit">Radar 2</button>
                </form>
                <iframe id="the-frame2" width="347" height="282" src=""></iframe>
                <script type="text/javascript">
                    (function () {
                        "use strict";
                        var url_setter = document.getElementById('url-setter2'), url = document.getElementById('url2'), the_iframe = document.getElementById('the-frame2');
                        url_setter.onsubmit = function (event) {
                            event.preventDefault();
                            // 修正变量名错误
                            the_iframe.src = url.value;
                        };
                    }());
                </script>
                <form method="post" target="imgChart2">
                    <input type="submit" value="Chart 2" />
                    <input type="text" id="ChartBar2" name="ChartBar2" style="width: 286px;"><br>
                </form>
                <img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 2">
            </div>
            <div class="column right">
                <form action="" method="post" id="url-setter3">
                    <input type="text" name="url3" id="url3" />
                    <button type="submit" name="submit">Radar 3</button>
                </form>
                <iframe id="the-frame3" width="347" height="282" src=""></iframe>
                <script type="text/javascript">
                    (function () {
                        "use strict";
                        var url_setter = document.getElementById('url-setter3'), url = document.getElementById('url3'), the_iframe = document.getElementById('the-frame3');
                        url_setter.onsubmit = function (event) {
                            event.preventDefault();
                            // 修正变量名错误
                            the_iframe.src = url.value;
                        };
                    }());
                </script>
                <form method="post" target="imgChart3">
                    <input type="submit" value="Chart 3" />
                    <input type="text" id="ChartBar3" name="ChartBar3" style="width: 286px;"><br>
                </form>
                <img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 3">
            </div>
        </div>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Digital Farmer