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

Question

我正在开发一个带有HTML，CSS，Javascript，JQuery和JQTouch的小应用程序。

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

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

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

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

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

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

有什么想法？谢谢！

Answer 1

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

从the documentation for load看到这个“额外注”：

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

如果您使用任何AJAX，您将不得不在本地Web服务器上运行它。在这种情况下，您应该从本地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> 

Answer 2

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

Answer 3

或者您可以运行本地服务器。如果你有python，你可以到文件目录下运行python -m SimpleHTTPServer for python 2.7或python -m http.server for python 3.x

Answer 4

我对jQuery不太了解。但是，您仍然可以通过将page1.html加载到隐藏的iframe中，然后获取此页面的document.body.innerHTML，然后将该节点附加到您需要的div上。它只有JavaScript中的HTML DOM。

但是在性能基础上，加载iframe总是代价昂贵​​的。这会做你的工作。但是，在jQuery或其他库中可能有很多解决方案，对不起，我不太了解它。

Answer 5

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

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