私は3台のコンピュータを持っています。 Server,ClientおよびViewer。私はサーバーとビューアを制御しています。 Client上 
ブラウザをプログラムで更新するには
Serverに接続し、Webページが提示されます。Viewerは、キーボードとキーボードの間にユーザーの介入が全くないコンピュータです。 Viewerは常にウェブブラウザを起動して画像ページを表示しています。私の問題は、サーバーのディスク上の画像が変更されても、Webページが更新されないということです。ビューアまたはWebページの一部でWebブラウザを更新するにはどうすればよいですか？
私はhtml、css、javascript、php、ajaxを知っていますが、明らかに十分ではありません。
これを達成するには少なくとも3つの方法があります。
<meta http-equiv="refresh" content="5" />
これは自動的に更新されます：
としては "show.html" ドキュメントの<head>要素に次の<meta>のタグを追加するには、Amitdのコメントで指摘
ピュアHTML 5秒ごとにページを表示します。 content属性の値を希望の秒数に調整します。
ピュアJavaScriptを：
としては、あなたがそれを呼び出すときdocument.location.reload()ページを更新し、MeNoMoreによって指摘します。
<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リクエストによって指摘されたように使用することができますが、あなたが希望する画像のURLを返すために、Webサービスを記述する必要があると思います。
<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要求を行うためのJavaScriptは、このようになりますAJAX呼び出し。 jQueryはAJAX呼び出しとDOM操作をより簡単にするJavaScriptライブラリです。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
ます。また、ダウンロードできる「jquery.min.js」：jQueryライブラリを使用するには、あなたの<head>要素（例として使用されたバージョン1.4.2）で、それへの参照を含める必要があるだろう代わりにそれをローカルにホストしますが、もちろん、スクリプトをロードするURLを変更するだけです。以上のようになりますjQueryのを使用して書かれた
上記のAJAX機能
、：<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()は何ですか。
イメージをリフレッシュするための方法が他にもあることは間違いありません。個人的には、画像のURLが常に変化している場合は、AJAXルートを使用します。画像のURLが静的な場合は、おそらく<meta>の更新タグを使用します。
OPにオープンな様々なオプションの素敵な要約、他の人たちのクレジットをつかめる素晴らしい仕事...そして、特にその多くの機能のうちの1つにjQueryを使用することを考えると+1 –
使用。
document.location.reload();
例は、ボタンのクリックに反応するため
：<input type="button" value="Reload Page" onClick="window.location.reload()">
どうすればその関数を呼び出せますか？ – hpekristiansen
申し訳ありません私はクライアントからそれを行う必要があることを伝えるのを忘れました。 - 私の編集を参照してください。 – hpekristiansen
あなたは助けるためにAJAX要求を使用することができます。たとえば、5秒ごとにイメージのサーバーをポーリングすることです。代わりに、サーバーに新しい画像IDをポーリングして、その画像の元の乱数の代わりにそのIDを使用することができます。この場合、src属性は、新しいイメージがある場合にのみ/ reloadを変更します。
<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ソケット経由で変更されたときにサーバーから通知を受け取ることもできます。
OK - AJAXを調べます。サーバがリフレッシュするように指示された場合、よりエレガントになります。アップロードPHPスクリプトによって。 – hpekristiansen
1+ ..ウェブソケットの場合もこの例を参照してください。http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/ – Amitd
ブラウザは同じマシンにありますが、 Web開発の観点から見ると、他のクライアントページのようにページを書く必要があります。あなたのブラウザとOSに依存して非常に扱いにくいかもしれないブラウザを外部的に更新したい場合を除きます。 – tpower
サーバーとクライアントのロングポーリング接続を実装する必要があります。これはCOMETと呼ばれ、ブラウザがwebsocketをサポートしている場合はソケットを使用します。
javascriptでは、プログラムによって更新する方法はいくつかあります。
好ましい方法は、もう一つの方法は、location.hrefプロパティを設定することであるlocation.reload()
は、ブラウザが自動的に新しいURLになりそうlocation=locationまたはlocation.href=location.hrefもそれを行うだろうです。
2番目の方法はおそらく奇妙に見えますが。
要約すると、それはです：
location.reload();
//or
location.href=location.href;
//or
location=location;
特定の時間間隔でページをリロードすると、そのトリックがかかることがあります。
setTimeout(function(){
window.location.reload(1);
}, 5000);
上記のコードは、現在のページを5秒間にリロードします。
OR
またassynchronousなりますAJAX呼び出しのために行く可能性があり、また、あなたは文句を言わない、ページ全体を更新する必要があります。次のコードをチェックアウト：これはinstaedの使用可能
を$.ajax({
url: "test.aspx",
context: document.body
}).done(function() {
$(this).addClass("done");
});
window.location.reload(1);
[** test.htmlという：**このページは、それすなわち、負荷に上のすべての画像SRCをもたらすことがありますこのページに画像を取り込むサービス]
これを実行すると、done(function()にdataという結果が表示され、現在のページのhtml要素に一致することができます。例：
done(function() {
$('#ImageId').attr('src', data);
});
これは、Test.aspxという
アドバンテージからdataへのimgタグのsrcを設定します：ページ全体がリフレッシュされますされませんし、唯一の新しいイメージが追加されます。
は、私は正確に同じアプリケーションを持っているこのlink jQueryのAjaxの詳細については知っている...
徹底します。ちょうど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"が受信されると、サーバーはイメージの更新を待ちます。新しい画像がアップロードされると、サーバーは新しいメッセージを作成してクライアントに送信します。
賛否
Webソケットを使用する方法があります。ページを更新する必要はなく、更新するコンテンツを更新するだけで、完全に非同期であり、注意してサーバーを駆動します。ビューアを使用すると、ビューアがこれをサポートしているかどうかを判断できます。 – Leeish
私はウェブソケットを提案しようとしていたが、誰かがすでにやったと思った。これはWebSocketの完璧なシナリオです。すべての可能なイメージでは、ページのリロードには時間がかかりすぎます。サーバーは何度もポーリングを繰り返して爆撃されます。オフラインの能力を追加して、あなたのビューアは素晴らしいアプリです。 –
勝つためのWebソケット。ポーリング手法は、比較において非常に非効率的である。 –
最も簡単なのは、AJAXプーリングを使用することです。新しい写真がファイルにUNIXタイムスタンプの保存、アップロードされ、アップロード、手渡しのphpファイルでそのために
：
file_put_contents('lastupload.txt', strval(time())); // Save timestamp of upload
は、別のphpファイルを作成します。AJAX呼び出しを処理します（例polling.phpを）し、前回のアップロードのUnixタイムスタンプを返します。
タイムスタンプの変更を検出し、必要なときに画像が更新されますAJAXポーリングを行うjavascriptのコードビューアでecho file_get_contents('lastupload.txt'); // Send last upload timestamp
：
$(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;
}
}
});
}
私はコードをテストしていないので、間違いがあるかもしれませんが、これがアイデアです。
私はあなたがそれのために多くのスクリプトを書く必要はないと思います。画像URLの直後に疑問符と乱数を追加するだけで問題は解決しました。あなたが画像URLを変更しない場合、ブラウザはキャッシュからそれを呼び出します。あなたの質問と私の解決策は、jQueryのを使用して乱数でそれを変更することで、画像のURLをリフレッシュさ
http://static.example.com/myimage.jpg?56
：ようですが、何かを印刷し
<img src="<?php echo $image_url; ?>?<?php echo rand(10,99); ?>"/>
：ページ上の最新の写真を表示するには
私の問題では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');
}
});
});
最善の解決策は、定期的に画像を確認するために、視聴者のWebブラウザ上で小さなPHPスクリプトを書くことになり、その変更された場合は、それをリロードします。 PHPコードはサーバー側で実行されるので、簡単に実行できます。 コードスニペットが必要な場合は、これが助けてくれれば幸いです。
しかし、イメージsrc（5秒ごと）をリフレッシュするときは、すでにブラウザに伝えています。代わりにそれをリフレッシュしたいイベントはありますか？ – devnull69
複数のユーザーが画像をアップロードしており、毎回新しい画像を表示する必要がありますか？ – enenen
メタタグ http://www.webmonkey.com/2010/02/refresh_a_page_using_meta_tags/ – Amitd