在Web开发中，有时候我们需要在某个特定时间点上，重复地加载其他HTML页面。这种需求通常出现在网站自动刷新、轮播图等场景中。在本文中，我们将探讨如何利用 JavaScript 实现这一功能。
实现思路
实现这一功能的主要思路是使用 JavaScript 的定时器函数 setInterval()，以及 XMLHttpRequest 对象或 Fetch API 发起异步请求获取要加载的 HTML 页面内容。
具体的实现流程如下：
- 使用 setInterval() 函数设置定时器，指定每隔一段时间执行一次指定的函数。
- 在定时器函数中，使用 XMLHttpRequest 对象或 Fetch API 发起异步请求获取要加载的 HTML 页面内容。
- 将获取到的 HTML 页面内容插入到当前页面中。
代码实现
以下是使用 XMLHttpRequest 实现的代码示例：
-- -------------------- ---- -------
-------- ---------- -
--- ----- - --- -----------------
------------------------ - ---------- -
-- ---------------- -- - -- ----------- -- ---- -
-------------------------------------------- - ------------------
-
--
----------------- ------------ ------
-------------
-
--------------------- ------ -- -------------------以上代码会每隔5秒钟从服务器加载一次 page.html 文件，并将其内容插入到 id 为 "content" 的元素中。
如果你更喜欢使用 Fetch API，可以参考以下代码：
function loadPage() {
fetch('page.html')
.then(response => response.text())
.then(html => document.getElementById("content").innerHTML = html)
.catch(error => console.log(error));
}
setInterval(loadPage, 5000); // 每隔5秒钟执行一次loadPage函数两个示例的实现方式类似，区别在于请求方式不同。
注意事项
- 在实际应用中，需要注意每次加载的内容是否有变化，如果没有变化，则可以通过设置缓存头来减少请求次数。
- 跨域访问时需要特别注意跨域资源共享（CORS）策略问题。
结论
本文介绍了如何使用 JavaScript 实现在特定时间点上重复加载其他 HTML 页面的功能。该方法可以广泛应用于自动刷新、轮播图等场景中，并且具有很高的灵活性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14222