如何自动获取文件夹中所有HTML文件并随机嵌入iframe？

DevOps 小满

2026-8-20

自动获取文件夹下HTML文件并随机加载到iframe的解决方案

需求与现有代码

你需要替换手动定义的pages数组，自动获取myfolder文件夹下的所有HTML文件，并保持后续随机加载到iframe的逻辑正常运行。现有代码如下：

JavaScript 部分

// 获取HTML文件
var pages = ["myfolder/1.html", "myfolder/2.html", "myfolder/3.html"]; // 此处需替换为自动获取逻辑

// 随机选取一个HTML文件并添加到iframe中
$(".random-page").attr("src", "myfolder/" + pages[Math.floor(Math.random() * pages.length)]);

HTML 部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe class="random-page"></iframe>

替换方案说明

前端JavaScript无法直接读取服务器上的文件夹目录，需根据部署场景选择对应方案：

1. 纯静态站点（无后端服务）

通过预生成文件列表实现：

写一个Node.js脚本遍历myfolder文件夹，自动生成包含所有HTML文件路径的数组，保存为单独的JS文件（比如file-list.js）：
```
// file-list.js（脚本自动生成）
var pages = ["myfolder/1.html", "myfolder/2.html", "myfolder/3.html", "myfolder/4.html"];
```
在页面中先引入这个生成的JS文件，再引入业务逻辑JS，即可自动获取最新文件列表。

2. 有后端服务支持（如Node.js、PHP等）

通过后端接口返回文件列表：

后端编写接口（比如/get-html-files），遍历myfolder文件夹后返回所有HTML文件的路径数组。

前端用AJAX请求接口，获取数据后执行后续逻辑：

var pages = [];
$.get("/get-html-files", function(data) {
  pages = data;
  // 确保拿到数据后再执行随机加载
  $(".random-page").attr("src", pages[Math.floor(Math.random() * pages.length)]);
});

注意：后端返回的路径需包含myfolder/前缀，无需前端再拼接。