$("header").load('header.html')未加载

Question

我试着寻找这个简单问题的答案。我尝试使用发布的答案，但仍然收到一些错误，并且我的标题没有显示。

我有这个代码片段：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#header').load('partial/header.html'); 
    });
</script>

我的html主体有这个div：

<div id='header'></div>

我得到一个错误，它无法加载文件"partial/header.html“，并显示一条消息”跨域请求仅支持协议方案: http，data，chrome，chrome-extension，https，chrome-extension-resource“。

欢迎任何帮助

Answer 1

我也有同样的问题，我花了几个小时来找出解决方案。我在那里找到了答案Use JavaScript to Load Header and Footer Templates

此JavaScript在服务器环境下工作，因此此将无法加载页眉和页脚，如果您从您的桌面打开文件，这意味着您需要通过FTP上传文件并实时访问您的HTMLs。

因此，我使用Local Web Server中描述的http-nodeJS包安装了服务器，并使用index.html http-server从目录中启动了服务器。

现在我可以在http://localhost:8081/index.html中看到我的标题了(控制台中显示了8081。显然我的端口8080很忙)

这也应该从/开始：

$('#header').load('/partial/header.html'); 

我希望它能为另一个js初学者节省时间。

Answer 2

真的吗？我构建了一个"header.html“的新页面，然后复制你的代码，我可以得到这个页面并将其添加到"header”的div中。