时间戳

首页 > 解决方案 > 在事件中包含本地 html 文件（无服务器，无 ajax）

javascript - 在事件中包含本地 html 文件（无服务器，无 ajax）

问题描述

main问题归结为：当有人按下按钮时，如何显示全新的？

所以一个javascript代码看起来像这样：

let post1 = document.getElementById('post1')
post1.onclick=function (){
  //bring in local file?
  //document.main.innerHTML=localHtmlFile
}

和 HTML

<body>
    <button id="post1">Post 1</button>
    <main> </main>
</body>

我知道类似的事情是用 Ajax 完成的。但这不是对服务器的请求，而只是对同一台计算机中的文件的请求。

任何想法？

编辑

我只想为像我这样的新手提供一些信息：

注意：出于安全原因，您不能从本地文件系统 fetch() 文件（或在本地运行其他此类操作）；要在本地运行上述示例，您必须通过本地网络服务器运行该示例。MDN

这可能也适用于 XMLHttpRequests。

（所以看起来很愚蠢，我们无法获取自己的文件。）

标签： javascripthtmlrequest

解决方案

我已将 id 添加到主标记，并在 localHtmlFile 字段中存储了一个 html 字符串。

试试看

window.localStorage.setItem('page', "<div>new content</div>");

   
let post1 = document.getElementById('post1')
post1.onclick=function (){
  //can I include something similar to this?
  document.getElementById('main').innerHTML=window.localStorage.readItem('page');
} 
<body>
    <button id="post1">Post 1</button>
    <main id="main">
    </main>
</body>

推荐阅读