CODEWITHSUNDEEP
javascriptjqueryhtmlload
Josue
Josue

Reputation: 725

Get HTML code of a local HTML file in Javascript

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.com/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.com/html/ too, but I think it connect to the server.

Any idea? Thanks!

Upvotes: 2

Views: 23394

Answers (5)

Merlyn Morgan-Graham
Merlyn Morgan-Graham

Reputation: 59131

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

Upvotes: 0

Shea
Shea

Reputation: 1950

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');
});

Upvotes: 2

Kris
Kris

Reputation: 8863

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.

Upvotes: 0

Max
Max

Reputation: 8836

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

Upvotes: 1

landons
landons

Reputation: 9547

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

Upvotes: 0

Related Questions