Cookie更改时自动重新加载（自动刷新）html页面
[英]auto reload (auto refresh) html page when cookie change
问题描述
how can html page auto reload when the cookie change? 
Cookie更改时，如何自动重新加载html页面？
I have this code in my main html page : 我的主要html页面中有以下代码：
body onload="set_style_from_cookie()"
when I change the style for the main html page from another page , how can the main page detect this change and auto reload? 当我从另一个页面更改html主页的样式时，主页如何检测到此更改并自动重新加载？
2 个解决方案
解决方案1
0 2015-03-24 08:44:39
this one will work : 这将工作：
I just included a timed interval to check if the cookie is changed: 我只是添加了一个定时间隔来检查cookie是否已更改：
now if you open another window it will also be updated!
In this demo is only about background-color. 在本演示中，仅涉及背景色。 but you can change it and add style you need. 但您可以更改它并添加所需的样式。
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
</style>
<script type="text/javascript">
function cookieWrite(name,value,days){var expires=""; if(days){var date=new Date(); date.setTime(date.getTime()+(days*86400000)); expires="; expires="+date.toUTCString();} document.cookie=name+"="+value+expires+"; path=/";}
function cookieRead(name){var n=name+"="; var ca=document.cookie.split(";"); for(var i=0; i<ca.length; i++){var c=ca[i]; while(c.charAt(0)==" "){c=c.substring(1,c.length);} if(c.indexOf(n)==0){return c.substring(n.length,c.length);}} return "";}
function cookieDelete(name){if(!name){var ca=document.cookie.split(";"); for(var i=0;i<ca.length; i++){var cv=ca[i].split("="); cookieWrite(cv[0],"",-1);}}else{cookieWrite(name,"",-1);}}
var mybgcolor="";
var cookieIntervall=setInterval(monitorCookie, 2000);
function set_style_from_cookie(bgcolor){
if(typeof bgcolor=="undefined"){bgcolor=cookieRead("backgroundColor");}
cookieWrite("backgroundColor", bgcolor, 7);
document.body.style.backgroundColor=bgcolor;
mybgcolor=bgcolor;
}
function monitorCookie(){
var bgcolor=cookieRead("backgroundColor");
if(mybgcolor!=bgcolor) set_style_from_cookie(bgcolor);
};
window.addEventListener("load",function(){set_style_from_cookie();},false);
</script>
</head>
<body>
<div> <button type="button" onclick="set_style_from_cookie('blue')">BLUE</button> </div>
<div> <button type="button" onclick="set_style_from_cookie('black')">BLACK</button> </div>
<div> <button type="button" onclick="set_style_from_cookie('white')">WHITE</button> </div>
<div> <button type="button" onclick="set_style_from_cookie('red')">RED</button> </div>
<div> <button type="button" onclick="set_style_from_cookie('yellow')">YELLOW</button> </div>
<hr />
<div>refresh page to see that the BG-color will be read from cookie</div>
</body>
</html>
解决方案2
0 2015-03-24 13:23:19
Make a function like this that will check your cookie every 0.1 seconds 进行如下操作，每隔0.1 seconds检查一次Cookie
//keep track of our cookie
var cookieRegistry = [];
function listenCookieChange(cookieName, callback) {
setInterval(function() {
if (cookieRegistry[cookieName]) {
if (readCookie(cookieName) != cookieRegistry[cookieName]) {
// update registry so we dont get triggered again
cookieRegistry[cookieName] = readCookie(cookieName);
return callback();
}
} else {
cookieRegistry[cookieName] = readCookie(cookieName);
}
}, 100);
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
bind it 绑定它
listenCookieChange('cookiename', function() {
Location.reload();
});
this will however execute this script 10x per second so you may want to change this. 但是，它将以每秒10x速度执行此脚本，因此您可能需要更改此脚本。 To do so change the ' 100 '. 为此，请更改“ 100 ”。 (if you change it to 1000 it wil check once every second). （如果将其更改为1000则会每秒检查一次）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.