logo标签列表

将HTML内容加载到HTML页面上

jqueryhtml
3
在有人将这个问题标记为重复之前，我已经对此进行了大量的调查，但我仍然没有找到解决我的问题的方法。 所以，我有这些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(anonymous function) @ index.html:10c @ jquery.min.js:3fireWith @ jquery.min.js:3ready @ jquery.min.js:3H @ jquery.min.js:3
你真的不应该以这种方式加载页眉和页脚；这只会增加页面请求的数量。你应该在一个“基础”页面中拥有页眉和页脚，然后导入内容页面。 - Soviut
你遇到了什么确切的跨域错误？你能给我们展示一下footer.html请求的响应头吗？ - Brad
根据您的网站结构，如果您想要静态页面但以一种使用共同模板的方式构建，您可以考虑使用类似Webpack的打包工具。这是一种通过仅维护一个共同模板来生成完整页面的静态HTML的方法（因此您可以轻松地在任何CDN上托管）。 - Brad
@Brad 这是错误信息 http://pastebin.com/fTD5L8p1 - user4798789
@Brad 我已经适应了，谢谢你的提醒。 - user4798789
2个回答
1
你不能向本地驱动器发出AJAX请求......没有HTTP服务器，因此无法进行HTTP请求。你得到的跨域错误有点误导人。
将你的页面放在服务器上。
另请参阅: https://dev59.com/LWIj5IYBdhLWcg3wpWlx#20578692
-1
你的代码没有起作用的原因是因为你把Jquery放在元素加载到网站之前，导致它无法正常工作。
你可以使用以下方法来修复它：
$( document ).ready(function() {
    $('#filename').load("footer.html");
});

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

2
这是错误的。问题中的代码已经做到了这一点。 - Brad
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接