javascript - 在本地 HTML 页面上动态加载内容

Question

关闭。这个问题需要更多 focused .它目前不接受答案。












想改进这个问题？更新问题，使其仅关注一个问题 editing this post .

7年前关闭。




Improve this question




上下文:
基本上我附上了一个小的 HTML 帮助文档来配合我的程序(不打算在服务器上，在本地查看)。 HTML 只是因为我最擅长在其中制作文档，但我也希望它具有一些我无法在 PDF 或其他文件中执行的交互性/动态内容。

当您单击链接时，我会动态替换内容，而不是让每个页面都需要它自己的 HTML 页面，这只是我习惯做的事情，因此我可以在单个“主”上更改菜单和横幅以及其他任何内容' html 文件，而不必为共享内容中的一个微小变化调整每个其他 html 文件。

当前方法:
现在这一切都是通过 javascript 和 jQuery 完成的。当用户单击链接时，我使用 jQuery 的 load() 函数来加载适当的内容(一个 html 文件)并将内容 div 替换为加载的 html 文件中的内容。目前只使用相对链接。例如。核心功能如下:

$("#ContentBox").load("content/faq.html");

几周前，当我第一次写它时，这实际上是有效的。并不是说我构建了整个东西，直到现在才测试它的核心概念。但现在似乎所有的浏览器都在阻止它。 Chrome 说:

XMLHttpRequest cannot load file:///C:/[....]/content/home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. `

问题:
所以我理解为什么会发生这种情况，因为允许这样做会带来潜在的安全风险，我只是想找到一个很好的方法来解决它，它仍然可以做我想做的事情(如果可能的话)。我的意思是我可以将所有内容预加载为 javascript 文件中的巨大字符串变量或打开和关闭的隐藏 div，但我希望有一些更优雅的东西。

而且我不能指望我的程序的所有用户都设置本地 Web 服务器只是为了查看帮助文档。

我考虑过 File 和 FileReader 类，但它们需要用户输入才能使用很多功能。还有 iFrame，但它引入了各种需要考虑的怪异现象，我讨厌 iFrame。

Answer 1

如果这是所有本地内容，那么您不应该通过 ajax 加载它。您可以使用的一种选择是将帮助文件设置为本地 Javascript 模板。然后，您可以使用诸如 mustache 或 underscore 之类的模板库来引用它们，并在您的应用程序中链接到它们，如下所示:

<script type="text/template" src="local/helpfile.js" />

如果您不想使用模板库，则可以将 helpfile.js 设置为 JSON 数据，但您需要先转义引号字符。