如何以编程方式刷新浏览器 [英] How do I programmatically refresh a browser
问题描述
服务器，客户端和查看器。我在控制服务器和查看器。 -
客户端上的用户连接到服务器并显示网页。 - 通过php脚本用户上传图像。
- 图像嵌入在某些html中。
-
Viewer是完全没有用户交互的电脑 - 没有键盘。Viewer始终始终运行Web浏览器，显示图片页面。
现在我的问题是，即使服务器磁盘上的图片发生变化，网页也不会更新。我怎么刷新浏览器或网页的一部分？
我知道html，css，javascript，php和ajax，但显然不够好。
至少有三种方法可以实现此目的。
纯HTML
正如 Amitd 的评论，在show.html中为您的文档的< head> < meta> 标签c $ c>元素：
pre $ < meta http-equiv =refreshcontent =5/>
这会每5秒自动刷新页面。将内容属性的值调整为所需的秒数。
纯粹的JavaScript：
正如 MeNoMore 指出的， document.location.reload（）会在您调用它时刷新页面。
< script type =text / javascript>
//将其放在show.html
//使用window onload事件来运行函数
//所以函数在加载所有内容后运行。
//刷新后，整个脚本将再次运行。
window.onload = function（）{
'use strict';
var millisecondsBeforeRefresh = 5000; //调整时间
window.setTimeout（function（）{
//刷新整个文档
document.location.reload（）;
}，millisecondsBeforeRefresh）;
};
< / script>
正如 tpower 可以使用AJAX请求，但是您需要编写Web服务以将url返回到所需的图像。执行AJAX请求的JavaScript应该如下所示：
< script type =text / javascript>
//将其放在show.html
//使用window onload事件来运行函数
//所以函数在加载所有内容后运行。
window.onload = function（）{
'use strict';
var xhr，
millisecondsBeforeNewImg = 5000; //在这里调整时间
if（window.XMLHttpRequest）{
// Mozilla，Safari，...
xhr = new XMLHttpRequest（）;
} else if（window.ActiveXObject）{
// IE
try {
//尝试更新的ActiveXObject
xhr = new ActiveXObject（Msxml2.XMLHTTP ）;
catch（e）{
尝试{
// newer失败，尝试更旧的
xhr = new ActiveXObject（Microsoft.XMLHTTP）;
} catch（e）{
//将错误记录到浏览器控制台
console.log（e）;
$ b if（！xhr）{
//将错误记录到浏览器控制台
console.log（'放弃:(不能）创建一个XMLHTTP实例'）;
}
xhr.onreadystatechange = function（）{
var img;
//处理服务器响应
if（xhr.readyState === 4）{
//一切都很好，收到的回应是
if（xhr.status === 200）{
// perfect！
//假设responseText包含图像的新url ...
//获取img
img = document.getElementById（'theImgId'）;
//设置新的src
img.src = xhr.responseText;
} else {
//请求存在问题，
//例如响应e可能包含404（未找到）
//或500（内部服务器错误）响应代码
console.log（xhr.status）;
}
} else {
//仍然没有准备好
//可以在这里做某些事情，但并不是必须的
//严格来说就是为了例子目的
}
};
//使用的setInterval运行每X毫秒
window.setInterval（函数（）{
xhr.open（ 'GET'， 'http://www.myDomain.com/someServiceToReturnURLtoDesiredImage' ，true）;
xhr.send（null）;
}，毫秒BeforeNewImg）
};
< / 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>< /脚本>
您也可以下载jquery.min.js并在本地托管它，当然，只能改变你加载脚本的url。
上面的AJAX函数，当使用jQuery编写时看起来更像这样：
< script type =text / javascript>
//把它放在show.html
中//document.ready取代window.onload
$（document）.ready（function（）{
'use strict';
var millisecondsBeforeNewImg = 5000; //在此调整时间
window.setInterval（function（）{
$ .ajax（{
url：http ：//www.myDomain.com/someServiceToReturnURLtoDesiredImage，
错误：功能（jqXHR，textStatus，errorThrown）{
//记录错误到浏览器控制台
的console.log（textStatus + '：'+ errorThrown）;
}，
success：function（data，textStatus，jqXHR）{
//获取img并分配新的src
$（ '#theImgId'）。attr（'src'，data）;
}
}）;
}，millisecondsBeforeNewImg）;
}）;
< / script>
正如我所希望的那样，jQuery版本更加简单和清晰。然而，考虑到你的项目的范围很小，我不知道你是否想要为jQuery增加额外的开销（并不是那么重要）而烦恼。我也不知道你的项目需求是否允许jQuery的可能性。我包括这个例子只是为了回答你关于 $。ajax（）是什么的问题。
确保有其他方法可以完成刷新图像。就个人而言，如果图片url始终在变化，我会使用AJAX路线。如果图片网址是静态的，我可能会使用< meta> 刷新标记。
I have three computers; Server, Client and Viewer. I am in control of the server and the viewer.
- The user on the
Clientconnects to theServerand is presented with a webpage. - Through a php script the user uploads an image.
- The image is imbedded in some html.
- The
Vieweris a computer totally without user interaction - there is no keyboard. TheVieweris always at all time running a web browser, displaying the picture page.
My problem now is that even though the picture changes on the server disk, the webpage is not updated. How do I refresh the web browser on the viewer, or part of the webpage?
I know html, css, javascript, php and ajax, but apparently not well enough.
There are at least three ways to accomplish this.
Pure HTML
As pointed out by Amitd's comment, in "show.html" add the following <meta> tag to your document's <head> element:
<meta http-equiv="refresh" content="5" />
This will automatically refresh the page every 5 seconds. Adjust the value of the content attribute to the desired number of seconds.
Pure JavaScript:
As pointed out by MeNoMore, document.location.reload() will refresh the page when you call it.
<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>
And as pointed out by tpower AJAX requests could be used, but you'd need to write a web service to return a url to the desired image. The JavaScript to do an AJAX request would look something like this:
<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>
Other methods:
Finally, to answer your question to tpower's answer... $.ajax() is using jQuery to do the AJAX call. jQuery is a JavaScript library that makes AJAX calls and DOM manipulation a lot simpler. To use the jQuery library, you'd need to include a reference to it in your <head> element (version 1.4.2 used as an example):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
You could also download the "jquery.min.js" and host it locally instead but that would, of course, only change the url you are loaded the script from.
The AJAX function above, when written using jQuery would look more like this:
<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>
As I hope is evident, the jQuery version is much simpler and cleaner. However, given the small scope of your project I don't know if you'd want to bother with the added overhead of jQuery (not that it's all that much). Neither do I know if your project requirements allow the possibility of jQuery. I included this example simply to answer your question of what $.ajax() was.
I'm equally sure that there are other methods by which you can accomplish refreshing the image. Personally, if the image url is always changing, I'd use the AJAX route. If the image url is static, I'd probably use the <meta> refresh tag.
这篇关于如何以编程方式刷新浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
