用 Javascript 获取本地 HTML 文件的 HTML 代码答案

【问题标题】：Get HTML code of a local HTML file in Javascript用 Javascript 获取本地 HTML 文件的 HTML 代码
【发布时间】：2011-12-13 17:29:53
【问题描述】：

我正在使用 HTML、CSS、Javascript、JQuery 和 JQTouch 开发一个小型应用程序。

这是一个本地应用程序。我有一个带有一些 div 的 index.html。当我单击此文件中的链接时，我想加载 page1.html（同一文件夹）的 HTML 代码并将我想要的 page1.html 标记插入 index.html 的 div。

示例：将(page1.html)的内容注入(index.html)中。

我试试：http://api.jquery.com/load/

$('#loadContent').load('page1.html #test');

并且 loadContent 的内容没有改变。我将 JQuery 脚本包含到 index.html...

我也尝试http://api.jquery.com/html/，但我认为它连接到服务器。

有什么想法吗？谢谢！

【问题讨论】：

您仍然需要在网络服务器（例如 localhost）上运行它，因为它使用 XMLHttpRequest 从服务器加载数据“从服务器加载数据并将返回的 HTML 放入匹配的元素中。”跨度>

标签： javascript jquery html load

【解决方案1】：

确保在创建 loadContent 之后调用它。当文档准备好写入时，以下将运行您的加载代码。

$(function() {
$('#loadContent').load('page1.html #test');
});

【讨论】：

已经声明，XMLHttpRequest 必须与 HTTP Web 服务器一起使用。我建议安装 WAMP，并安装和配置 Apache、PHP 和 Mysql。如果您能够对本地文件进行 Ajax 调用，那将是一个巨大的安全漏洞。

【解决方案2】：

或者您可以运行本地服务器。如果你有 python，你可以带着文件进入你的目录并运行 python -m SimpleHTTPServer 用于 python 2.7 或 python -m http.server 用于 python 3.x

【讨论】：

Node.js 也是如此；安装 http-server 和 npm 然后从任何地方运行 http-server。
@andrewjackson，我不认为安装 wampserver 比在命令提示符下运行 1 行更容易。但是，很多人对命令提示符和导航到目录等感到不舒服，所以我想 wampserver 也是一个不错的建议。
@Max 你假设他甚至首先拥有 Python，这根本不容易搞砸。

【解决方案3】：

默认情况下，大多数浏览器会在本地文件系统上阻止此操作，以作为安全预防措施。你在远程服务器上试过吗？

【讨论】：

【解决方案4】：

我对 jQuery 了解不多。但是，您仍然可以这样做，将 page1.html 加载到隐藏的 iframe，然后获取此页面的 document.body.innerHTML，然后将该节点附加到您需要的 div 中。它在 JavaScript 中唯一的 HTML DOM。

但是以性能为基础，加载 iframe 总是很昂贵的。这会做你的工作。不过 jQuery 或其他库中可能有很多解决方案，抱歉我不太了解。

【讨论】：

【解决方案5】：

听起来问题是当您在localhost 上运行时没有加载 jQuery 库，或者 AJAX 请求由于同样的原因而失败。这是由于浏览器内置的保护to prevent cross-site scripting。

见the documentation for load的这个“附加说明”：

由于浏览器安全限制，大多数“Ajax”请求都受同源策略的约束；请求无法从不同的域、子域或协议中成功检索数据。

如果您使用任何 AJAX，则必须在本地 Web 服务器上运行它。在这种情况下，您应该从本地网络服务器而不是文件系统运行此页面。那么您将不需要任何解决方法。

如果您使用的是 Windows，您可以use UniServer。

如果您不打算使用任何 AJAX（不使用 load），那么您可以编写代码，以便在远程版本未加载时回退到本地版本的 jQuery。

这是一个例子，grabbed from this page：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/Scripts/lib/jquery/jquery-1.4.4.min.js"></script>'))</script>

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script>!window.jQuery.validator && document.write('<script src="/Scripts/lib/jquery/jquery.validate.min.js"></script>')</script>

<script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
<script>!window.jQuery.validator.unobtrusive && document.write('<script src="/Scripts/lib/jquery/jquery.validate.unobtrusive.min.js"></script>')</script>

【讨论】：