Question

上下文
基本上我附加了一个HTML帮助文档来配合我的程序（不是在服务器上，在本地查看）。 HTML只是因为我最适合制作文档，但我也希望它有一些交互性/动态内容，我不能用PDF或其他任何东西。

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

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

$("#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模板。然后，您可以使用模板库（如胡子或下划线）引用它们，并在应用程序中链接到它们，如下所示：

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

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

Answer 2

如果仅在Windows计算机上查看帮助文档，则应考虑使用HTML应用程序来消除跨源问题。或者你可以通过组合隐藏textareas中的所有源代码文件来解决它。我做完了lol

Answer 3

对于任何仍然感兴趣的人来说，这是我现在解决的解决方案。在正文的末尾是所有具有不同页面内容的div，如下所示：

<div id='PageName' class='content-div'>
    <!-- content goes here -->
</div>

<div id='AnotherPage' class='content-div'>
    <!-- content goes here -->
</div>

id很重要，因为它成为了页面的名称和类类型，你可以命名为什么，我曾经用visibility:hidden;隐藏它们并且给它绝对定位在0,0 - 只是以防万一 - 这样他们就不会与其他元素互动并搞砸布局。

在页面加载中，以及一堆其他函数，我按页面名称将元素存储到javascript关联对象中。

var content = {};

function onLoadThisGetsCalledSomewhere() {
    // loop through all of those divs
    $(".div-content").each(
        function() {
            // using $(this) to grab the div in the scope of the function here
            var element = $(this).element;
            var name = $(this).attr('id');
            // remove it from the html (now it exists only in the content object)
            element.detach();
            // remove that style class that makes it invisible
            element.removeClass('content-div');
            // put it into memory
            content[name] = element;
        }
    );
}

因此，当点击指向其他网页的链接时，onclick会执行类似switchPage(pageName)的说法。

function switchPage(requestedPage) :
    // somewhat simplified, real version has case and null checks that take you to 404 page
    var contentElement = content[requestedPage];
    // replace content in some container div where you want content to go
    $("#TheContentContainer").empty().append( contentElement );
    // have to adjust size (width possibly too but I had a fixed width)
    $("#TheContentContainer").height( contentElement.height() );
}

我不在同一台电脑上，所以我重新写了所有这些，而不是复制/粘贴，所以可能会有一些错误/错别字（警告我 - 我明天会修复它）。我使用的版本稍微复杂一些，因为我有子页面以及动态处理的菜单栏更改。还有一些功能，您可以打开＆＃34;链接＆＃34;如果进行了这样的操作，则在新窗口/选项卡中正确显示但现在这里并不重要。

我认为隐藏的div没有太大的不同（这里的好处是从html中删除它的detach（）函数）或只是在java vars中存储长字符串的html代码（比这更可读）虽然），但我认为它的优点是更清洁（恕我直言），到目前为止我喜欢它。一个缺点是有很多页面，你会得到一个巨大的HTML文档，编辑一个特定的页面可能会很痛苦，但任何体面的编辑器都应该有一个书签功能，以使它更容易到达你的线路＃39 ;寻找。如果不是本地的，那么这也是一个坏主意的原因，但如果它在线只是使用jQuery load（）函数那么又是。

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

3 个答案: