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

Question

问题归结为：当有人按下按钮时，我如何显示一个全新的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。

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

Answer 1

我已将 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>

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

问题描述

编辑

1 个解决方案

解决方案1
0 2020-08-04 14:59:05

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

问题描述

编辑

1 个解决方案

解决方案1 0 2020-08-04 14:59:05

解决方案1
0 2020-08-04 14:59:05