Istnieją co najmniej trzy sposoby osiągnięcia tego.
czysty HTML
Jak podkreślił Amitd „s komentarzu w "show.html" dodaj następujący <meta> tag do dokumentu <head> element:
<meta http-equiv="refresh" content="5" />
To automatycznie odświeżyć Strona co 5 sekund. Ustaw wartość atrybutu content na pożądaną liczbę sekund.
Czysta JavaScript:
Jak podkreślił MeNoMore, document.location.reload() będzie odświeżyć stronę, kiedy to nazwać.
<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>
I jak podkreślił tpower żądań AJAX może być używany, ale trzeba by napisać usługi internetowej, aby powrócić url do żądanego obrazu.Kod JavaScript, aby zrobić żądania AJAX będzie wyglądać mniej więcej tak:
<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>
Inne metody:
Wreszcie, aby odpowiedzieć na to pytanie odpowiedzieć tpower „s ... $.ajax() korzysta jQuery wykonać Połączenie AJAX. jQuery jest biblioteką JavaScript, która znacznie upraszcza połączenia AJAX i manipulacje DOM. Aby korzystać z biblioteki jQuery, trzeba by zawierać odniesienie do niej w swoim elemencie <head> (wersja 1.4.2 jako przykład):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Można również pobrać „jquery.min.js” i hostuj go lokalnie zamiast tego, ale to oczywiście zmieniłoby tylko adres URL, od którego skrypt jest załadowany.
Funkcja AJAX powyżej, kiedy napisany przy użyciu jQuery będzie wyglądać mniej więcej tak:
<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>
jak mam nadzieję jest oczywiste, wersja jQuery jest znacznie prostsze i czystsze. Jednak biorąc pod uwagę mały zakres twojego projektu, nie wiem, czy chciałbyś zawracać sobie głowę dodatkowym obciążeniem jQuery (nie, że to wszystko tyle). Nie wiem też, czy Twoje wymagania projektowe pozwalają na możliwość jQuery. Zawarłem ten przykład po prostu, aby odpowiedzieć na pytanie, co to jest $.ajax().
Jestem równie pewny, że istnieją inne metody, dzięki którym można odświeżyć obraz. Osobiście, jeśli adres URL obrazu zawsze się zmienia, skorzystam z trasy AJAX. Jeśli adres URL obrazu jest statyczny, prawdopodobnie użyję tagu odświeżania <meta>.
Jak programowo odświeżyć przeglądarkę?
Ale już mówisz przeglądarce, kiedy odświeżyć obraz src (co 5 sekund). Na którym wydarzeniu chcesz zamiast tego odświeżyć? – devnull69
Czy chcesz powiedzieć, że wielu użytkowników przesyła obrazy, a każdy z nich musi za każdym razem oglądać najnowszy obraz? – enenen
jest również metatag http://www.webmonkey.com/2010/02/refresh_a_page_using_meta_tags/ – Amitd