在 Javascript 中获取本地 HTML 文件的 HTML 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8486590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get HTML code of a local HTML file in Javascript
提问by Josue
I'm developing a small application with HTML, CSS, Javascript, JQuery and JQTouch.
我正在使用 HTML、CSS、Javascript、JQuery 和 JQTouch 开发一个小型应用程序。
This is a LOCAL application. I've an index.html with some div's. When I click on a link in this file, I want to load HTML code of page1.html (same folder) and insert into a div of index.html the tag that I want of page1.html.
这是一个本地应用程序。我有一个带有一些 div 的 index.html。当我单击此文件中的链接时，我想加载 page1.html（同一文件夹）的 HTML 代码并将我想要的 page1.html 标签插入 index.html 的 div。
Example: Inject the content of (page1.html) into (index.html).
例子：将(page1.html)的内容注入(index.html)。
I try: http://api.jquery.com/load/
我尝试：http: //api.jquery.com/load/
$('#loadContent').load('page1.html #test');
And the content of loadContent doesn't change. I include JQuery script into index.html...
而且 loadContent 的内容不会改变。我将 JQuery 脚本包含在 index.html 中...
I try http://api.jquery.com/html/too, but I think it connect to the server.
我也尝试http://api.jquery.com/html/，但我认为它连接到服务器。
Any idea? Thanks!
任何的想法？谢谢！
回答by Shea
Make sure you're calling it after loadContent has been created. The following will run your load code when the document is ready to be written to.
确保在创建 loadContent 之后调用它。当文档准备好写入时，以下将运行您的加载代码。
$(function() {
$('#loadContent').load('page1.html #test');
});
回答by Max
Or you could run a local server. If you have python you can go to your directory with the files and run python -m SimpleHTTPServerfor python 2.7 or python -m http.serverfor python 3.x
或者您可以运行本地服务器。如果您有 python，您可以使用文件转到您的目录并运行python -m SimpleHTTPServerpython 2.7 或python -m http.serverpython 3.x
回答by Kris
I dont know much on jQuery. But still, you can do this, by loading the page1.html to a hidden iframe, then get the document.body.innerHTML of this page, and then append that node to the div you need. Its only HTML DOM in JavaScript.
我对 jQuery 了解不多。但是，您仍然可以通过将 page1.html 加载到隐藏的 iframe，然后获取此页面的 document.body.innerHTML，然后将该节点附加到您需要的 div 来执行此操作。它是 JavaScript 中唯一的 HTML DOM。
But performance base, loading an iframe is always a costly one. This would do your job. However there may be many solutions in jQuery or other libraries, Sorry i don't know much on it.
但是基于性能，加载 iframe 总是代价高昂的。这将完成你的工作。但是，jQuery 或其他库中可能有很多解决方案，抱歉，我对此知之甚少。
回答by Merlyn Morgan-Graham
It sounds like the problem is that the jQuery library isn't loading when you're running on localhost, or the AJAX request is failing for the same reason. This is due to protection built into the browser to prevent cross-site scripting.
听起来问题是当您在 上运行时未加载 jQuery 库localhost，或者 AJAX 请求因相同原因而失败。这是由于浏览器内置的保护功能可以防止跨站点脚本编写。
See this "additional note" from the documentation for load:
请参阅以下文档中的load“附加说明” ：
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
由于浏览器安全限制，大多数“Ajax”请求都遵循同源策略；请求无法从不同的域、子域或协议成功检索数据。
If you use any AJAX, you'll have to run this on a local web server. In which case you should just run this page from your local webserver rather than from the filesystem. Then you won't need any workarounds.
如果您使用任何 AJAX，则必须在本地 Web 服务器上运行它。在这种情况下，您应该只从本地网络服务器而不是文件系统运行此页面。那么您将不需要任何解决方法。
If you're on Windows, you could use UniServer.
如果您使用的是 Windows，则可以使用 UniServer。
If you aren't going to use any AJAX whatsoever (aren't using load), then you could write your code so that it falls back to a local version of jQuery if the remote version didn't load.
如果您不打算使用任何 AJAX（不使用load），那么您可以编写代码，以便在远程版本未加载时回退到本地版本的 jQuery。
Here's an example of how, 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>
回答by landons
Most browsers will, by default, block this on a local file system as a security precaution. Have you tried it on a remote server?
默认情况下，大多数浏览器会在本地文件系统上阻止此操作作为安全预防措施。你在远程服务器上试过吗？
