jquery - Get HTML code of a local HTML file in Javascript - Stack Overflow

admin管理员组

文章数量:1292362

I'm developing a small application with HTML, CSS, Javascript, JQuery and 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.

Example: Inject the content of (page1.html) into (index.html).

I try: /

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

And the content of loadContent doesn't change. I include JQuery script into index.html...

I try / too, but I think it connect to the server.

Any idea? Thanks!

I'm developing a small application with HTML, CSS, Javascript, JQuery and 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.

Example: Inject the content of (page1.html) into (index.html).

I try: http://api.jquery./load/

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

And the content of loadContent doesn't change. I include JQuery script into index.html...

I try http://api.jquery./html/ too, but I think it connect to the server.

Any idea? Thanks!

• javascript
• jquery
• html
• load

Share Improve this question Follow edited Dec 13, 2011 at 9:10 Emre Erkan 8,48233 gold badges5151 silver badges5454 bronze badges asked Dec 13, 2011 at 9:05 JosueJosue 72522 gold badges1010 silver badges2222 bronze badges 1

• 3 You will still need to run this on a webserver (e.g. localhost) because it loads data from a server using XMLHttpRequest 'Load data from the server and place the returned HTML into the matched element.' – David Commented Dec 13, 2011 at 9:13

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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.

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

Or you could run a local server. If you have python you can go to your directory with the files and run python -m SimpleHTTPServer for python 2.7 or python -m http.server for python 3.x

Most browsers will, by default, block this on a local file system as a security precaution. Have you tried it on a remote server?

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.

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.

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.

See this "additional note" from the documentation for 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.

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.

If you're on Windows, you could use 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.

Here's an example of how, grabbed from this page:

<script src="//ajax.googleapis./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./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./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>

本文标签： jqueryGet HTML code of a local HTML file in JavascriptStack Overflow