Geek Answers Handbook

Get HTML code of local HTML file in Javascript

I am developing a small application with HTML, CSS, Javascript, JQuery and JQTouch.

This is a LOCAL application. I have index.html with some divs. When I click the link in this file, I want to download the HTML code of page1.html (the same folder) and insert the tag that I want on page1.html into the div from index.html.

Example. Paste the content (page1.html) into (index.html).

I'm trying: http://api.jquery.com/load/

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

And the contents of loadContent are not changed. I am including a jQuery script in index.html ...

I am trying to http://api.jquery.com/html/ , but I think it is connecting to the server.

Any idea? Thanks!

+2
source share
5 answers

Make sure you call it after creating the loadContent. The following will run your download code when the document is ready to be written.

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

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

+1
source

It seems that the problem is that the jQuery library does not load when you are working on localhost , or the AJAX request is not working for the same reason. This is due to the protection built into the browser to prevent cross-site scripting .

See this “extra note” from the documentation for load :

Due to browser security restrictions, most Ajax requests are subject to the same origin policy; The request cannot successfully retrieve data from another domain, subdomain, or protocol.

If you use any AJAX, you will have to run it on a local web server. In this case, you should simply run this page from your local web server, and not from the file system. Then you will not need workarounds.

If you are running Windows, you can use UniServer .

If you are not going to use any AJAX (not using load ), you can write your code so that it returns to the local version of jQuery if the remote version did not load.

Here is an example of how captured 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>
0
source

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

0
source

I don't know much about jQuery. But still you can do this by loading page1.html into a hidden iframe, and then get the document.body.innerHTML of this page, and then add this node to the div you need. Its the only HTML DOM in JavaScript.

But a performance base, loading an iframe is always expensive. That would do your job. However, there may be many solutions in jQuery or other libraries, sorry, I know little about it.

0
source

More articles:


All Articles