思路： 1.获取swiper所有的html文件， 2.为其添加a,iframe 标签，遍历数据的时候一一对应 3.获取模版数据，最终生成html数据
目录结构：
// index.js文件
const fs = require("fs")
const path = require("path")
var temp1 = ''
fs.readdir('./public/demos/', 'utf-8', function (err, data) {
let temp = ''
data.forEach(item => {
if (data == 'images') return
let a = `<li><a class='catenate' href="./public/demos/${item}" target="swiper_name">${item}</li>`
temp += a
})
fs.readFile('./template.text', 'utf8', function (err, data) {
let newData = data.replace('link', temp)
fs.writeFile('./index.html', (newData), function (err) {
if (err) {
console.log(err + `----文件写入失败`)
}
console.log(err + `----文件写入成功`)
})
})
})
// 模版文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100vw;
height: 100vh;
display: flex;
overflow: hidden;
}
.left {
width: 230px;
overflow-y: auto;
background-color: bisque;
}
.left .catenate{
display: inline-block;
width: 100%;
color: #4c4c4c;
padding: 5px 0px;
}
.left .catenate:hover,.left .catenate:focus{
background-color: #409EFF;
}
.right {
width:calc(100vw - 230px);
height:100vh;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<ul>
link
</ul>
</div>
<div class="right">
<iframe src="" style="width:calc(100vw - 230px);height:100vh" frameborder="0" name="swiper_name"></iframe>
</div>
</div>
<script>
window.onload =function(){
let liFirstDom = document.getElementsByTagName('li')[0]
liFirstDom.firstChild.click()
liFirstDom.firstChild.focus()
}
</script>
</body>
</html>
