为什么 JQuery LoadHTML function 没有将我的 html 添加到我的页面？
[英]Why is JQuery LoadHTML function not adding my html to my page?
问题描述
我正在尝试使用 JQuery 将 html 内容从另一个文件加载到我的主页。 我这样做是因为我有一个导航栏和页脚，它将在所有页面中保持不变。 我首先在自己的文件中独立编写它们并测试了它们中的每一个，因此我知道它们在静态放入 html 文件时可以工作。 但是，当我尝试使用 JQuery loadHTML function 加载它们时，我无法将它们放在页面上。
这是我的index.html文件供参考：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css">
<link href="NavBarStyle.css" rel="stylesheet">
<link href="FooterStyle.css" rel="stylesheet">
</head>
<body>
<header></header>
<div><h1>Content Goes Here</h1></div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src ="NavBar.js"></script>
<script>
$(document).ready(function () {
$("header").load("NavBar.html", function(){
$("header").enhanceWithin();
});
$("footer").load("Footer.html", function(){
$("footer").enhanceWithin();
});
});
</script>
</body>
</html>
我的导航栏.html
<div class = "navbar">
<div class="FB">
<iframe id="share" class = "facebook-bt" src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&size=small&width=96&height=20&appId" width="96" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
<iframe id="like" class = "facebook-bt"src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&share=true&height=35&appId" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
<div class="navbar-items">
<div class="navbar-links">
<div id = "big" class="dropdown">
<button class="dropbtn">ABOUT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">MEET US</a>
<a href="#">TESTIMONIALS</a>
<a href="#">OFFICE TOUR</a>
<a href="#">HOURS</a>
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">PATIENTS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">WHAT TO EXPECT</a>
<a href="#">PAPERWORK</a>
<a href="#">FAQ's</a>
<a href="#">HEALTH TIPS</a>
<a href="#">BLOG</a>
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">SERVICES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">CHIROPRACTIC</a>
<a href="#">NUTRITION</a>
<a href="#">MASSAGE</a>
<a href="#">OTHER</a>
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">REVIEWS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">REVIEW US</a>
<a href="#">TESTIMONIALS</a>
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">CONTACT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">CONTACT INFO</a>
<a href="#">LOCATION</a>
</div>
</div>
<div class="burger">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<div class="small-Nav">
<div class="navbar-links">
<div id = "small" class="dropdown">
<button class="dropbtn">ABOUT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
<a href="#">MEET US</a>
<a href="#">TESTIMONIALS</a>
<a href="#">OFFICE TOUR</a>
<a href="#">HOURS</a>
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">PATIENTS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
<a href="#">WHAT TO EXPECT</a>
<a href="#">PAPERWORK</a>
<a href="#">FAQ's</a>
<a href="#">HEALTH TIPS</a>
<a href="#">BLOG</a>
</div>
</div>
<div id = "small" class="dropdown-small">
<button class="dropbtn">SERVICES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">CHIROPRACTIC</a>
<a href="#">NUTRITION</a>
<a href="#">MASSAGE</a>
<a href="#">OTHER</a>
</div>
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">REVIEWS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
<a href="#">REVIEW US</a>
<a href="#">TESTIMONIALS</a>
</div>
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">CONTACT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
<a href="#">CONTACT INFO</a>
<a href="#">LOCATION</a>
</div>
</div>
</div>
</div>
</div>
<a href = "#">
<div class = "logo-circle">
<div class="logo"></div>
</div>
</a>
我的页脚设置方式与 NavBar.html 文件相同，只是内容略有不同。
我做错了什么导致文件无法加载？
3 个解决方案
解决方案1
0 2021-03-19 06:01:46
您不需要enhanceWithin调用，因此您的代码应如下所示：
$(document).ready(function () {
$("header").load("NavBar.html");
$("footer").load("Footer.html");
});
在此处查看load方法文档以获取详细信息。
我还建议检查文件的路径及其名称（也许您遇到 404 错误）
解决方案2
0 2021-03-19 06:18:14
尝试通过 dev 调试您的问题。 按F12控制台。 您应该看到几个错误。 类似Failed to load resource: net::ERR_FAILED和cors的东西。
您是直接从文件夹运行网络服务器或 index.html 吗？ 问题是.load不能直接运行，请阅读 jquery 的负载作为上述答案。
您将需要通过您的网络服务器运行 index.html，您将看到文件加载了请求的文件。
我收到消息： header
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header></header>
<div><h1>Content Goes Here</h1></div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("header").load("NavBar.html", function(){
// $("header").enhanceWithin(); // Ignoring this line since question is not asking to fix the errors regarding enhance. I'll leave that upto you.
});
});
</script>
</body>
</html>
解决方案3
-1 2021-03-19 05:54:51
您也可以在没有 JQuery 的情况下简单地使用
<header>
<include src="My NavBar.html"></include>
</header>
<footer>
<include src="My Footer.html"></include>
</footer>
为什么我的 JavaScript/JQuery 添加和删除带有函数的类不起作用？
[英]Why is my JavaScript/JQuery adding and removing class with function not working?
为什么我的jquery函数在Ajax加载的页面中的div上不起作用
[英]Why does my jquery function not work on div in page loaded by ajax
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.