如何用JavaScript将随机数(或时间毫秒)附加到页面上的所有链接?



我有一个静态的HTML页面在地址https://MyPage/index.html

该页包含若干图像,它们位于https://MyPage/MyImages

这些图片在HTML源代码中链接如下:

…<span><img width=x height=y src="MyImages/imageXYZ.png"</span>…

当一个按钮被点击,或者更好的是,当页面被加载时,所有的图像链接应该通过附加一个随机数来重写,或者,例如,以毫秒为单位的当前时间,这样之后的链接看起来像这样:

…<span><img width=x height=y src="MyImages/imageXYZ.png?1587624427"</span>…

我相信可以在这里找到可能的起点:

更改页面上的所有链接

如何使用javascript更改所有链接

如何将页面上的每个链接更改为新的内容?

从那里开始,我如何添加到给定的例子(而不是一个恒定的重定向)一个随机数或以毫秒为单位的时间被附加到所有图像链接?

const time_to_img = () => {
document.querySelectorAll('img').forEach(e => {
const dateStr = Date.now();
const date = new Date(dateStr);
e.src = e.src + '?' + date.getTime();
})
}
window.addEventListener('load', time_to_img);
<img src="https://picsum.photos/id/1/300/200" alt="">
<img src="https://picsum.photos/id/7/300/200" alt="">
<img src="https://picsum.photos/id/12/300/200" alt="">
<img src="https://picsum.photos/id/22/300/200" alt="">

在循环中,您可以以毫秒为单位计算时间,这将添加到每个图像的SRC后?

现在,如果您想为每个图像添加不同的数字,则必须添加一些东西(随机数?)。在这里,对于4张图片,一切都在同一毫秒内完成

在此期间我已经这样做了:

<body onload="CacheBuster()";>
<script>
function CacheBuster() {
document.querySelectorAll('img').forEach(e => {
const dateStr = Date.now();
const date = new Date(dateStr);
e.src = e.src + '?' + date.getTime();
})
}
</script>

这样好吗?它似乎工作得很好!

最新更新