在本地HTML页面上动态加载内容 [英] Dynamically loading content on local HTML page

问题描述

上下文：

基本上，我附加了一个HTML帮助文档，以便与我的程序一起使用（并不意味着在服务器上，在本地查看）。 HTML只是因为我在编写文档时感到非常舒服，但我也希望它具有一些我不能用PDF或其他方式做的互动/动态内容。

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

当前方法： >
现在全部通过javascript和jQuery完成。当用户点击一个链接时，我使用jQuery的load（）函数加载适当的内容（一个html文件），并用加载的html文件中的内容替换内容div。目前只使用相对链接。例如。核心函数如下所示：

  $（＃ContentBox）。load（content / faq.html） ; 
  

在我第一次写它时，这实际上是在几个星期前工作的。这并不像我构建整个事物，直到现在才对其核心概念进行测试。但现在看来，所有的浏览器都在阻止它。 Chrome说：

  XMLHttpRequest无法加载file：/// C：/ [....] /content/home.html 。只有协议方案支持跨源请求：http，data，chrome-extension，https，chrome-extension-resource。 `
  

问题：

所以我理解为什么它正在发生，因为这是一个潜在的安全风险，我只是想弄清楚它仍然做我想做的事情（如果可能的话）。我的意思是我可以将所有内容预加载为javascript文件中的大字符串变量，或者作为隐藏的div打开和关闭，但我希望有更优雅的东西。

我不能指望我的程序的所有用户都设置本地web服务器来查看以帮助doc。

我考虑过File和FileReader类，但它们需要用户输入很多功能。还有iFrames，但是它引入了各种奇怪的东西，我们讨厌iFrames。 解决方案

本地内容，那么你不应该通过ajax加载它。您可以选择的一种选择是将您的帮助文件设置为本地JavaScript模板。然后，您可以使用模板库（如胡须或下划线）引用它们，并在您的应用程序中链接到它们，如下所示：

 < script type =text / templatesrc =local / helpfile.js/> 
  

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

Context:
Basically I'm attaching a little HTML help doc to go with my program (not meant to be on a server, viewed locally). HTML just because I'm most comfortable in making docs in it but I also want it to have some interactivity/dynamic content which I can't do in a PDF or whatever.

I'm dynamically replacing the content when you click on a link instead of making every page need it's own HTML page, which is just something I'm used to doing so I can change the menu and banner and whatever else on a single 'main' html file without having to adjust every single other html file for one tiny change in the shared stuff.

Current Method:
Right now it's all done through javascript and jQuery. When a user clicks a link, I use jQuery's load() function to load the appropriate content (an html file) and replace the content div with what's in the loaded html file. Currently just using relative links. E.g. the core function is something like below:

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

This actually worked a few weeks ago when I first wrote it. It's not like I built the whole thing and didn't test its core concept until just now. But now it seems all the browsers are blocking it. Chrome says:

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. `

Question:
So I understand why it's happening as it's a potential security risk to allow that, I just want to figure a good way around it that still does what I want (if it's possible). I mean I could just preload all the content as huge string variables in the javascript file or as hidden divs that get turned on and off, but I was hoping for something a little more elegant.

And I can't expect all users of my program to setup a local web server just to view to help doc.

I've considered the File and FileReader classes but they require a user input for a lot of functions. There's also iFrames but that introduces all sorts of weirdness that needs to be accounted for and I hate iFrames.

解决方案

If this is all local content then you should not be loading it via ajax. One option you have at your disposal is to set up your help files as local Javascript templates. You can then refer to them using a template library like mustache or underscore and link to them in your application like so:

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

If you don't want to use a templating library then you can set up helpfile.js as JSON data, but you'll need to escape quote characters first.

这篇关于在本地HTML页面上动态加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！