jquery - 将 html 内容加载到 html 页面

<分区>

在有人将此问题标记为重复之前，我对此事进行了大量调查，但仍未找到解决问题的方法。所以，我有这些 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 cannot load file:///C:/Users/...../footer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.send @ jquery.min.js:5ajax @ jquery.min.js:5b.fn.load @ jquery.min.js:5(anonymous function) @ index.html:10c @ jquery.min.js:3fireWith @ jquery.min.js:3ready @ jquery.min.js:3H @ jquery.min.js:3

最佳答案

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

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

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

关于jquery - 将 html 内容加载到 html 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39432183/