Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Loading local html file into div

I'm trying to load a local html file into div, but it does seem to work (alert is displayed, but no content is displayed to the page).

HTML:

<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta charset="utf-8"> 
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>                   
        <script type="text/javascript" src="test.js"></script>
    </head>

    <body>
        <div id="blog"></div>   
    </body>
</html>

Javascript (test.js):

$(document).ready(function(){   
        $("#blog").load("tester.html", function() {
            alert('Load was performed.');
        });
});

Loaded HTML file (tester.html):

<p>
   The word <strong>hello</strong> should be bold.
</p>
like image 262
Mushy Avatar asked May 29 '13 18:05

Mushy


People also ask

How do I load an HTML file into a div?

To load external HTML into a <div>, wrap your code inside the load() function. To load a page in div in jQuery, use the load() method.

How do you insert an external HTML file?

To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.

How do I display the content of one HTML page in another?

You could use an <iframe> in order to display an external webpage within your webpage. Just place the url of the webpage that you want to display inside the quotes of the src attribute. Save this answer.


2 Answers

SOP (Same Origin Policy).
This will not work in Chrome.
Try in Firefox or on Localhost or on an online server.

AJAX cannot work from file:// but http://

like image 76
Roko C. Buljan Avatar answered Sep 28 '22 05:09

Roko C. Buljan


I don't know why are you doing this, but i seriously not recommend it. Browsers forbid this behaviour for security reasons, you can't load things from the file system.

If you are testing, use somthing like xampp is really easy to set up. It will also give a more real view of how web sites work. If you where actually trying to use this as a real web page, I recommend you search another way to do it.

like image 38
Nickydonna Avatar answered Sep 28 '22 05:09

Nickydonna