How to add common header footer using jQuery
Question
I am trying to make common header footer using jQuery. I am using this function for that, but it's not loading the content from header.html, it's showing the error in console (see in image)
<script type="text/javascript">
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
</script>
This is my full html page markup
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
hello shubham
<div data-load="header.html"></div>
<script type="text/javascript">
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
</script>
</body>
</html>
2 answers
solution1
2 2018-02-05 05:15:35
You need the serve the files from server, perhaps localhost in your case and not simply open html file in browser.
The error message is trying to say file protocol is not allowed for what you're trying to do.
It's better to setup local server. You can do that easily using http-server or live-server .
If you don't have node installed, then install it first.
solution2
0 2018-02-05 07:10:32
you should use localserver you can do that by using node.js command prompt
first access your directory and execute the following command :
http-server . -p 8000
then you can access using the url : http://127.0.0.1:8000
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.