為什么 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.