如何搭建本地HTML索引页跳转展示Matlab生成的绘图HTML文件

你完全不需要学习React、Node.js等复杂的前后端技术栈，仅需了解3个最基础的HTML/JS知识点即可实现需求，总代码量不超过50行，且非常容易用脚本自动生成。

需要了解的核心知识点 #

• HTML基础结构：你已经掌握基础页面搭建，只需要把页面分成左侧导航区和右侧内容展示区两个区块即可，用简单的<div>标签就能实现，若需要简单分栏效果，加10行以内的基础CSS即可，也可以完全不用CSS，不影响核心功能。
• <iframe>标签：这是实现侧边加载其他HTML的核心，它的作用是在当前页面内嵌入另一个独立的HTML页面，给该标签设置唯一id属性，后续即可通过JS动态修改它加载的文件路径。
• 超链接点击事件：无需用超链接默认的跳转行为，只需要给链接绑定简单的点击事件，点击时修改右侧iframe的src属性为对应绘图HTML的路径，即可实现无刷新切换绘图内容。

可直接使用的完整示例代码 #

将以下代码保存为my_awesome_page.html，和所有imagexxx.html放在同一个文件夹下，双击即可直接运行：

<!DOCTYPE html>
<html>
<head>
    <title>绘图集合</title>
    <style>
        /* 以下是极简分栏样式，可直接复用，也可删除不影响核心功能 */
        .nav { float: left; width: 20%; padding: 10px; border-right: 1px solid #ddd; }
        .content { float: left; width: 75%; padding: 10px; }
        #plotFrame { width: 100%; height: 90vh; border: none; }
    </style>
</head>
<body>
    <!-- 左侧导航区 -->
    <div class="nav">
        <h3>绘图列表</h3>
        <!-- 以下链接可通过Matlab/Python脚本循环生成，有多少个绘图文件就生成多少行 -->
        <p><a href="javascript:void(0)" onclick="document.getElementById('plotFrame').src='image1.html'">Image1</a></p>
        <p><a href="javascript:void(0)" onclick="document.getElementById('plotFrame').src='image2.html'">Image2</a></p>
        <p><a href="javascript:void(0)" onclick="document.getElementById('plotFrame').src='image3.html'">Image3</a></p>
    </div>
    <!-- 右侧内容展示区 -->
    <div class="content">
        <iframe id="plotFrame" src="image1.html"></iframe>
    </div>
</body>
</html>

自动生成页面的方法 #

你可以用熟悉的Python/Matlab写个简单脚本：

1. 遍历存储绘图HTML的文件夹，获取所有imagexxx.html的文件名列表
2. 固定页面的首尾模板，只需要循环生成导航区的链接行，替换模板中对应位置的内容即可
3. 生成完成后直接保存为my_awesome_page.html即可使用

注意事项 #

• 所有文件在本地Chrome打开即可正常运行，不需要搭建任何服务器，也不需要公网访问权限
• 如果绘图HTML和顶层页面不在同一个文件夹，直接在src属性里写绝对路径即可，比如/home/username/image1.html，本地浏览器完全支持本地路径加载

内容的提问来源于stack exchange，提问作者user2840470