如何使用jQuery添加通用页眉页脚

Question

我正在尝试使用jQuery创建通用页眉页脚。 我为此使用了此功能，但它并未从header.html加载内容，而是在控制台中显示了错误（请参见图片）

<script type="text/javascript">
    $(function(){
    $("[data-load]").each(function(){
        $(this).load($(this).data("load"), function(){
        });
    });
})
</script>

这是我的完整html页面标记

<!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>

Answer 1

您需要从服务器（可能是localhost提供文件，而不仅仅是在浏览器中打开html文件。

该错误消息试图说您要执行的操作不允许使用file协议。

最好设置本地服务器。 您可以使用http-server或live-server轻松地做到这一点。

如果您尚未安装节点，请先安装它。

Answer 2

您应该使用localserver您可以通过使用node.js命令提示符来做到这一点

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

如何使用jQuery添加通用页眉页脚

问题描述

2 个解决方案

解决方案1
2 2018-02-05 05:15:35

解决方案2
0 2018-02-05 07:10:32

如何使用jQuery添加通用页眉页脚

问题描述

2 个解决方案

解决方案1 2 2018-02-05 05:15:35

解决方案2 0 2018-02-05 07:10:32

解决方案1
2 2018-02-05 05:15:35

解决方案2
0 2018-02-05 07:10:32