I know this question has been asked many times , I have gone through all solutions but could not solve the issue.
I am new to programming and want to make a page that load some content in a div with id "content" through java script.
This is my index page
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<a href="#">home</a>
<a href="#">about</a>
<div id="content">
<script src="loader.js"></script>
</div>
</body>
</html>
and this is my loader.js
$(document).ready(function() {
$('#content').load('home.html');
});
when I run index.html i get
jquery-3.1.1.js:9536 XMLHttpRequest cannot load file:///C:/Users/Desktop/my_folder/home.html.
all the files are in same folder named my_folder.
Unfortunately XMLHttpRequest can not be called to local resources, EVEN IF the HTML ist stored locally.
Its because you can programatically read the contents of local files and send them into the web, what is not allowed.
i have found the answer of my question
i have changed my script to
function load_home(){
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
return false;
}
and call this function in content div
thanks for the help :)