Question

我有一个GitHub页面网站，上面有一个图像。每当我将更改推送到网站时，我都会尝试使网页显示警报。

到目前为止，我的方法是实现自动刷新功能：

setTimeout(function(){ location.reload(); }, 60000);

这将每分钟自动更新，捕获我所做的所有更改。但是，每当页面内容更改时，我都需要显示警报。重要的是要记住，内容不会在每次刷新时更改-可能仅每10分钟一次（当我推送更改时）。

我认为这样做的方法是存储图像的名称，然后查看图像名称在每次刷新时是否发生更改-如果名称确实发生更改，则显示警报。我一直在阅读有关LocalStorage的内容，但是我不确定如何存储文件名-我对JS / HTML有点陌生。

使用LocalStorage是否是解决此问题的最佳方法？在GitHub页面上实现此目的的其他替代方法/简单方法还有哪些？

谢谢。

Answer 1

如果我清楚地了解您需要实现的内容，建议您阅读JavaScript中的 MutationObserver 。此类跟踪对绑定元素进行的所有更改。这是代码，工作demo：

<html>
<body>
<p>
Some content
</p>
</body>

<script>
// select the target node
var element = document.getElementsByTagName('p')[0];

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  alert("Some changes were made");
});

// configuration of the observer:
var config = { childList: true}; // ,subtree: true, characterData: true 

// pass in the target node, as well as the observer options
observer.observe(element, config);

setInterval(function () { // here you can make your changes programatically
element.innerHTML += "New content";
}, 2000)
</script>
</html>

Answer 2

您还可以使用Cookie，即将Cookie的最后一个“版本”存储在Cookie中，其中“版本”可以是字符串，数字等。

这具有它也可以发送到服务器的优点，因此您可以直接在服务器上生成警报布局/代码。

检查https://github.com/js-cookie/js-cookie来简化此脚本。

另一种替代方法是在服务器上实现一个脚本，该脚本响应内容是否更改。像http://foo.bar/changed?lastVer=XXXX这样的东西，可以返回像{changed:true,message:'We have changed the change'}这样的JSON。您可以通过ie检索到。 jQuery.getJSON()或普通XMLHttpRequest，如果是这种情况，请向用户显示消息，然后重新加载页面。但这需要在某个地方制作可运行的服务器脚本。

第三个选择是将页面加载到例如隐藏的IFRAME中，检查图像或内容是否已更改，如果是，则仅将图像（或某些内容）移植到主页而不刷新。或者刷新它。想法是将页面加载到IFRAME中，并在其中检测是否有更改。

网站上的图片更改时显示警报

2 个答案: