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>
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.
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.
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.
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://
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With