0

我有一个 IP 网络摄像头并将图像上传到气象服务。然后我捕获该图像以显示在我的网页中。为了做到这一点，我搜索了一些可以在不刷新页面的情况下刷新图像的代码。我找到了一些我改编的代码（对不起，我不知道该承认谁）......

    <script> 
    var reimg
    window.onload=function () {
    reimg=document.getElementById('re')
    setInterval(function () {
    reimg.src=reimg.src.replace(/\?.*/,function () {
    return '?'+new Date()
    })
    },60000)
    }
    </script>

在很大程度上，下一点可能是矫枉过正，但我​​一直试图让它在所有浏览器上工作（我希望它看起来如何）......

    <iframe frameborder=0 marginwidth=0 marginheight=0 border=0 width="360" height="270" style="overflow:
    hidden;border:0;margin:0;width:360px;height:270px;max-width:100%;max-height:100%" 
    src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?" id="re" scrolling="no"
    allowtransparency="true">If you can see this, your browser doesn't understand IFRAME. However, we'll 
    still <A HREF="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg">link</A> 
    you to the file.</iframe>

它在 Firefox 中运行良好，减少了 640 x 480 的原始图像以适应。但是，在 IE 和 Chrome 中，仅显示图像的中心顶部（即图像不会缩小以适应）。是否需要任何额外的代码来确保它在 IE 和 Chrome 中正确显示（即我想要的，减少到适合），还是不可能？

4

1 回答 1

0

图像如何显示实际上取决于浏览器，没有标准。最简单的解决方案是创建一个包含 javascript 和<img>图像标签的 HTML 文件，而不是将图像直接加载到 iframe 中：

<!DOCTYPE HTML>
<html><head>
<script>
window.onload = function() {
    var reimg = document.getElementsByTagName('img')[0];

    setInterval(function () {
        reimg.src = reimg.src.replace(/\?.*/, function () {
            return '?'+new Date()
        });
    }, 60000);
};
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
img { width: 360px; height: 270px; }
</head><body>
    <img src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?">
</body></html>

将此保存为“webcam.html”或其他任何内容：

<iframe frameborder=0 marginwidth=0 marginheight=0 border=0
width="360" height="270" style="overflow: hidden; border:0; 
margin:0; width:360px; height:270px; max-width:100%; max-height:100%" 
src="webcam.html" id="re" scrolling="no"
allowtransparency="true">...</iframe>
于 2012-04-08T10:30:31.900 回答