Question

我有三台电脑; Server，Client和Viewer。我控制着服务器和查看器。 workflow

Client上的用户与Server相关联，并会显示一个网页。
通过php脚本，用户上传图片。
图片嵌入了一些HTML。
Viewer是完全没有用户互动的计算机 - 没有键盘。 Viewer始终在运行Web浏览器，显示图片页面。

我现在的问题是，即使服务器磁盘上的图片发生变化，网页也不会更新。如何在查看器或部分网页上刷新Web浏览器？

我知道html，css，javascript，php和ajax，但显然不够好。

Answer 1

至少有三种方法可以实现这一目标。

纯HTML

正如Amitd的评论所指出的那样，在“show.html”中，将以下<meta>标记添加到文档的<head>元素中：

<meta http-equiv="refresh" content="5" />

这将每5秒自动刷新一次页面。将content属性的值调整为所需的秒数。

纯JavaScript：

正如MeNoMore指出的那样，document.location.reload()会在您调用时刷新页面。

<script type="text/javascript">
    //put this somewhere in "show.html"
    //using window onload event to run function
    //so function runs after all content has been loaded.
    //After refresh this entire script will run again.
    window.onload = function () {
        'use strict';
        var millisecondsBeforeRefresh = 5000; //Adjust time here
        window.setTimeout(function () {
            //refresh the entire document
            document.location.reload();
        }, millisecondsBeforeRefresh);
    };
</script>

正如tpower指出的那样，可以使用AJAX请求，但是您需要编写一个Web服务来将URL返回到所需的图像。执行AJAX请求的JavaScript看起来像这样：

<script type="text/javascript">
    //put this somewhere in "show.html"
    //using window onload event to run function
    //so function runs after all content has been loaded.
    window.onload = function () {
        'use strict';
        var xhr,
            millisecondsBeforeNewImg = 5000;    // Adjust time here
        if (window.XMLHttpRequest) {
            // Mozilla, Safari, ...
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            // IE
            try {
                // try the newer ActiveXObject
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    // newer failed, try the older one
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    // log error to browser console
                    console.log(e);
                }
            }
        }
        if (!xhr) {
            // log error to browser console
            console.log('Giving up :( Cannot create an XMLHTTP instance');
        }
        xhr.onreadystatechange = function () {
            var img;
            // process the server response
            if (xhr.readyState === 4) {
                // everything is good, the response is received
                if (xhr.status === 200) {
                    // perfect!
                    // assuming the responseText contains the new url to the image...
                    // get the img
                    img = document.getElementById('theImgId');
                    //set the new src
                    img.src = xhr.responseText;
                } else {
                    // there was a problem with the request,
                    // for example the response may contain a 404 (Not Found)
                    // or 500 (Internal Server Error) response code
                    console.log(xhr.status);
                }
            } else {
                // still not ready
                // could do something here, but it's not necessary
                // included strictly for example purposes
            }
        };
        // Using setInterval to run every X milliseconds
        window.setInterval(function () {
            xhr.open('GET', 'http://www.myDomain.com/someServiceToReturnURLtoDesiredImage', true);
            xhr.send(null);
        }, millisecondsBeforeNewImg)
    };
</script>

其他方法：

最后，要回答tpower的回答问题...... $.ajax()正在使用jQuery进行AJAX调用。 jQuery是一个JavaScript库，它使AJAX调用和DOM操作变得更加简单。要使用jQuery库，您需要在<head>元素（用作示例的版本1.4.2）中包含对它的引用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

您也可以下载“jquery.min.js”并在本地托管，但这当然只会更改您从中加载脚本的URL。

上面的AJAX函数，当使用jQuery编写时看起来更像是这样：

<script type="text/javascript">
    //put this somewhere in "show.html"
    //document.ready takes the place of window.onload
    $(document).ready(function () {
        'use strict';
        var millisecondsBeforeNewImg = 5000;    // Adjust time here
        window.setInterval(function () {
            $.ajax({
                "url": "http://www.myDomain.com/someServiceToReturnURLtoDesiredImage",
                "error": function (jqXHR, textStatus, errorThrown) {
                    // log error to browser console
                    console.log(textStatus + ': ' + errorThrown);
                },
                "success": function (data, textStatus, jqXHR) {
                    //get the img and assign the new src
                    $('#theImgId').attr('src', data);
                }
            });
        }, millisecondsBeforeNewImg);
    });
</script>

我希望很明显，jQuery版本更简单，更清晰。但是，考虑到你的项目范围很小，我不知道你是否想要担心jQuery的额外开销（不是那么多）。我也不知道您的项目要求是否允许jQuery的可能性。我将此示例仅用于回答您关于$.ajax()是什么的问题。

我同样确定还有其他方法可以让您完成刷新图像。就个人而言，如果图像网址总是在变化，我会使用AJAX路线。如果图片网址是静态的，我可能会使用<meta>刷新标记。

Answer 2

我有完全相同的应用程序。只需使用WebSockets。

您可以启动websocket connection，服务器会在获得更新时通知Viewer。您可以通过websocket发送更新的图像，完全异步，而不会干扰显示或用户交互。

如果您使用计时器，您将无法获得快速更新，或者您将继续刷新页面而不使用。

<强>详细信息：

需要像pywebsocket或phpwebsocket这样的Websocket服务器。

<强>客户端：

需要HTML5 websocket支持，所有当前浏览器都支持它。

需要在图像更新发生时注册消息。这就像注册回调一样。

示例：

wSocket = new WebSocket('ws://' + serverIP + ':' + serverPort + '/images');

wSocket.onopen = function() {
    console.log("Primary Socket Connected.");

    connectedPrimary = true;

    wSocket.send("sendImageUpdates");
};

wSocket.onmessage = function(evt) {
    // evt is the message from server

    // image will be representated as a 64 encoded string

    // change image with new one
    $("#image").attr('src', 'data:image/png;base64,' + evt.data);
}

wSocket.onclose = function() {
    console.log("Primary Socket Closed.");

    wSocket = null;
};

wSocket.onerror = function(evt) {
    alert(evt);
}

每当服务器发送更新时，将调用映射到wSocket.onmessage的函数，您可以执行任何操作。

服务器

将侦听来自客户端的连接（可以支持多个客户端）。建立连接并收到消息"sendImageUpdates"后，服务器将等待映像中的任何更新。上传新图像后，服务器将创建新消息并发送给客户端。

<强>赞成

图片上传后会立即获得更新图片已上传。

客户将知道图片已更改，可以执行其他操作功能。

完全异步和服务器驱动。

Answer 3

您可以使用AJAX请求来提供帮助。例如，您正在做的是每五秒钟对服务器轮询一次图像。相反，您可以轮询服务器以获取新的图像ID，并使用该ID而不是图像源的随机数。在这种情况下，src属性只会在有新图像时更改/重新加载。

<script language="JavaScript"><!--
function refreshIt() {
   if (!document.images) return;
   $.ajax({
      url: 'latest-image-id.json',
      success: function(newId){
          document.images['doc'].src = 'doc.png?' + newId;        
      }
   });
   setTimeout(refreshIt, 5000); // refresh every 5 secs
}
//--></script>
</head>
<body onLoad=" setTimeout(refreshIt, 5000)">
<img src="doc.png" name="doc">

另一种方法是在图像通过Web套接字更改时从服务器获取通知。

Answer 4

在特定的时间间隔内重新加载页面可能会有所帮助。

setTimeout(function(){
window.location.reload(1);
}, 5000);

以上代码会在5秒内重新加载当前页面。

OR

您也可以进行ajax调用，这将是同步的，您也不必刷新整个页面。查看以下代码：

$.ajax({
  url: "test.aspx",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

这可以用于window.location.reload(1);

的instaed

[** test.html：**此页面必须将加载的所有图像src引入其中，即将图像引入页面的服务。]

执行此操作后，您将在data中获得done(function()的结果，您可以将其绑定到当前页面中的html元素。例如：

done(function() {
$('#ImageId').attr('src', data);
 });

这会将test.aspx

中的img标记的src设置为data

优势：整个页面不会刷新，只会添加新图片。

详细了解link以了解有关jQuery Ajax的更多信息......

Answer 5

使用。

document.location.reload();

例如，对单击按钮做出反应：

<input type="button" value="Reload Page" onClick="window.location.reload()">

Answer 6

如果您的浏览器支持websocket，您需要实现与服务器的客户端长轮询连接（称为COMET）或使用套接字。

Answer 7

在javascript中，有几种方法可以通过编程方式进行刷新。

首选方法是location.reload()

另一种方法是设置location.href属性，浏览器会自动转到新网址，因此location=location或location.href=location.href也会这样做。

虽然第二种方法可能看起来很奇怪。

回顾一下，那是：

location.reload();
//or
location.href=location.href;
//or
location=location;

<小时/> 我希望这有帮助。

Answer 8

最简单的方法是使用AJAX池对于处理上传的php文件，在上传新照片时，将unix时间戳保存在文件中：

file_put_contents('lastupload.txt', strval(time())); // Save timestamp of upload

创建另一个将处理AJAX调用并返回上次上传的unix时间戳的php文件（例如：polling.php）：

echo file_get_contents('lastupload.txt'); // Send last upload timestamp

在Viewer javascript代码中进行AJAX轮询，检测时间戳的变化并在需要时刷新图像：

$(function() {
   setInterval(polling, 1000); // Call polling every second.
});
var lastupload = 0;
function polling() {
   $.ajax({
      url: 'polling.php',
      success: function(timestamp){
          if (timestamp > lastupload) { // Is timestamp newer?
              document.images['image'].src = 'image.png?' + timestamp; // Refresh image
              lastupload = timestamp;
          }
      }
   });
}

我没有测试过代码，所以可能会有错误，但这就是想法。

Answer 9

我认为你不需要很多脚本。我解决了这个问题只是在图片网址后面添加了问号和随机数。如果您不更改图像，则浏览器会从缓存中调用它。

要在页面上显示最新的图片：

<img src="<?php echo $image_url; ?>?<?php echo rand(10,99); ?>"/>

它打印的内容如下：

http://static.example.com/myimage.jpg?56

您的问题和我的解决方案是使用Jquery和javascript随机数函数在我的问题中使用随机数更改图像网址。我认为你明白了这一点，并会根据你的需要进行调整。

$('#crop_image').live('click',function(){
    $(this).html(ajax_load_fb);
    var x = $('#x').val();
    var y = $('#y').val();
    var w = $('#w').val();
    var h = $('#h').val();
    var dataString = 'process=image_crop&x='+x+'&y='+y+'&w='+w+'&h='+h;
    $.ajax({
        type: 'POST',
        url: '<?php echo $siteMain;?>ajax/ajaxupload.php',
        data: dataString,
        cache: false,
        success: function(msg) {
            $('#crop_image').html('Crop Selection');
            $('.crop_success_msg').slideDown('slow');
            var numRand = Math.floor(Math.random()*101);
            $('#current_img').html('<img src="/images/large_<?php echo $user['username'];?>.jpg?'+numRand+'"/>');
        },
        error: function(response, status, error)
        { 
            $(this).html('Try Again');
        }
    });
});

Answer 10

最好的解决方案是在查看器Web浏览器上编写一个小的PHP脚本来定期检查图像，如果更改了它将重新加载它。由于php代码在服务器端运行，您可以轻松完成。我希望如果你需要代码片段让我知道这会有所帮助。

如何以编程方式刷新浏览器

10 个答案: