获取Javascript中本地HTML文件的HTML代码

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

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

示例：将（page1.html）的内容注入（index.html）中

我尝试：

loadContent的内容不会改变。我将JQuery脚本包括到index.html中

我也尝试过，但我认为它可以连接到服务器

---

有什么想法吗？谢谢

问题似乎在于当您在

localhost

上运行时，jQuery库没有加载，或者AJAX请求由于同样的原因失败。这是由于浏览器内置了保护功能

请参见以下“附加说明”：

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

如果您使用任何AJAX，则必须在本地web服务器上运行它。在这种情况下，您应该从本地Web服务器而不是从文件系统运行此页面。那你就不需要任何变通办法了

如果你在Windows上，你可以

如果您不打算使用任何AJAX（不使用

load

），那么您可以编写代码，以便在远程版本未加载的情况下返回到jQuery的本地版本

下面是一个示例，说明如何：

!window.jQuery和document.write（“”））
!window.jQuery.validator&&document.write（“”）
!window.jQuery.validator.unobtrusive&&document.write（“”）

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

或者您可以运行本地服务器。如果你有python，你可以带着文件到你的目录，运行python 2.7版的

python-msimplehttpserver

，或者Python3.x版的

python-mshttp.server

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

---

但基于性能，加载iframe总是代价高昂的。这会做你的工作。不过，jQuery或其他库中可能有许多解决方案，很抱歉，我对它了解不多。

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

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

---

您仍然需要在Web服务器（例如localhost）上运行此操作，因为它使用XMLHttpRequest“从服务器加载数据并将返回的HTML放入匹配的元素”从服务器加载数据。Node.js也是如此；使用

npm

安装

http服务器

，然后从任何地方运行

http服务器

。@andrewjackson，我不认为安装wampserver比在命令提示符下运行一行要容易。然而，许多人对命令提示符和导航到目录之类的东西感到不舒服，所以我想wampserver也是一个好建议。@Max您假设他甚至一开始就有Python，这一点不容易搞乱。有人说过，XMLHttpRequest必须与HTTP web服务器结合使用。我建议安装WAMP，并安装和配置Apache、PHP和Mysql。如果您能够对本地文件进行Ajax调用，这将是一个巨大的安全漏洞。

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

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