Question

在有人将此问题标记为重复之前，我对此事进行了大量调查，但我还没有找到解决问题的方法。所以，我有这些header.html和footer.html文件，我想将他们的内容加载到一个新的html页面（试图不重复代码）。我知道我可以用非常简单的方式在php中完成这些工作，但我尝试用JQuery（刚刚开始深入研究）。到目前为止，这是我的代码：

<!DOCTYPE html>
<html>

    <head>
            <link rel="stylesheet" type="text/css" href="./style.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

             <script> 
                $(function(){
                    $('#filename').load("footer.html");
                });
            </script>       
    </head>

    <body>

        <div id="filename"></div>

    </body>
</html>

我收到以下错误：

jquery.min.js：5 XMLHttpRequest无法加载file：/// C：/Users/...../footer.html。交叉源请求仅支持协议方案：http，data，chrome，chrome-extension，https，chrome-extension-resource.send @ jquery.min.js：5ajax @jquery.min.js：5b.fn.load @ jquery.min.js：5（匿名函数）@ index.html：10c @jquery.min.js：3fireWith @jquery.min.js：3ready @jquery.min.js：3H @jquery.min.js：3 < / p>

Answer 1

您无法向本地驱动器发出AJAX请求...没有HTTP服务器，因此无法进行HTTP请求。你得到的跨源错误有点误导。

将您的页面放在服务器上。

另请参阅：https://stackoverflow.com/a/20578692/362536

Answer 2

您的代码无法正常工作的原因是因为您在将元素加载到网站之前放置了Jquery，导致它无法正常工作。

您可以使用类似的东西来修复它：

$( document ).ready(function() {
    $('#filename').load("footer.html");
});

这将等到页面的元素已经加载到页面中，然后它会将footer.html内容加载到ID为filename的元素中。

将html内容加载到html页面

2 个答案: