如何在已托管网站中打开本地指定路径的HTML文件（仅本机使用）

由于浏览器安全策略限制，直接从在线网站跳转本地文件路径（如file:///D:/project/demo.html）默认会被拦截，但你可以通过以下几种方式在自己的机器上实现需求：

1. 修改浏览器安全设置（仅自用，不适合公开场景） #

Chrome/Edge 浏览器 #

• 右键点击浏览器快捷方式，选择「属性」
• 在「目标」栏末尾添加参数： --allow-file-access-from-files --allow-file-access

  注意：参数前要加一个空格，比如原目标是"C:\Program Files\Google\Chrome\Application\chrome.exe"，修改后变为"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --allow-file-access

• 点击「应用」「确定」，重启浏览器后，在线网站的按钮可通过以下代码跳转本地文件：

  <button onclick="window.location.href='file:///D:/project/demo.html'">打开本地演示页</button>
  

Firefox 浏览器 #

• 在地址栏输入about:config，回车后确认风险提示
• 搜索security.fileuri.strict_origin_policy，将其值改为false
• 之后同样可以用上述按钮代码实现跳转

2. 本地启动简易HTTP服务器（更安全可靠的方案） #

比起修改浏览器设置，更推荐把本地demo文件放在简易HTTP服务器中，既符合浏览器安全规则，也能模拟真实部署环境：

• 若你有Node.js，打开命令行进入D:\project目录，执行：

  npx http-server -p 8080
  

• 若用Python 3，同样进入目标目录，执行：

  python -m http.server 8080
  

• 之后在线网站的按钮可跳转至http://localhost:8080/demo.html，代码如下：

  <button onclick="window.location.href='http://localhost:8080/demo.html'">打开本地演示页</button>
  

这种方式无需修改浏览器设置，且JS文件能正常加载，完全模拟线上环境。

3. 本地打开在线网站静态文件（若网站为纯静态） #

如果你的在线网站是纯静态HTML/CSS/JS，可将整个网站文件下载到本地，和demo.html放在同一目录下，直接在浏览器打开本地网站首页，此时按钮用相对路径跳转即可：

<button onclick="window.location.href='./demo.html'">打开本地演示页</button>

这种方式完全避开跨域问题，适合纯静态网站的演示场景。

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