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

上下文：
基本上，我附上了一个小的HTML帮助文档去与我的程序（不意味着在服务器上，本地查看）。 HTML只是因为我在制作文档时感到非常自在，但我也希望它具有一些我不能在PDF或其他内容中实现的交互/动态内容。动态加载本地HTML页面上的内容

当您点击一个链接而不是让每个页面都需要它自己的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类，但它们需要用户输入很多功能。还有iFrames，但它引入了各种奇怪的东西，需要考虑，我讨厌iFrames。

来源

2014-11-05 wowohweewah

如何[当前答案]（http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-but-im-loading-a-co）不帮你？ – Jonast92 2014-11-05 22:38:16

这就像你没有读过我的问题。所有的解决方案都能正常工作，但对于普通用户只需打开帮助文档无法预期。安装网络服务器，向chrome添加参数，python .. – wowohweewah 2014-11-05 22:41:34

如果您已经知道这些问题，那么这个问题本身就太宽泛了。没有人能告诉你最好的方法是什么。服务器托管便宜 – charlietfl 2014-11-05 22:54:30

如果您的帮助文档只能在Windows计算机上查看，您应该考虑使用HTML应用程序来摆脱交叉来源问题。或者您可以通过将隐藏的textareas中的所有源代码文件合并来解决此问题。我已经完成了大声笑

来源

2014-11-05 23:29:00

对任何人仍然感兴趣这是我现在解决的解决方案。在机身的结束都与风格，像这样不同的网页内容的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()); 
}

我不是在同一台计算机上，所以我写这一切了新生活，不要复制/粘贴所以有可能会出现一些错误/错别字（买者自负 - 我会解决它明天）。我使用的版本也有些复杂，因为我有子页面以及动态处理的菜单栏更改。还有一些功能，以便您可以在新窗口/选项卡中正确打开“链接”，如果这样做的话。但现在这不重要。

这不是太不同，我想用隐藏的div（这里的好处是detach（）函数将它从html中移除）或者只是在java vars中存储长字符串的html代码（比这更可读）但我认为它的优点是更清洁（恕我直言），到目前为止我喜欢它。一个缺点是有很多页面你会得到一个巨大的HTML文档，这可能会让编辑一个特定的页面变得非常痛苦，但是任何体面的编辑器都应该有一个书签功能，以使它更容易到达你所在的行寻找。如果不是本地的话，这也是一个糟糕的主意，但如果它在线的话，只需使用jQuery的load（）函数即可。

来源

2014-11-06 04:41:24 wowohweewah

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

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

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

来源

2014-11-06 04:57:27 IcedDante

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

回答

相关问题