文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >为什么JQuery LoadHTML函数没有将我的html添加到我的页面？

问为什么JQuery LoadHTML函数没有将我的html添加到我的页面？
EN

Stack Overflow用户
提问于 2021-03-19 05:46:34
回答 3查看 43关注 0票数 0

我正在尝试使用JQuery将html内容从另一个文件加载到我的主页。我这样做是因为我有一个导航栏和页脚，它将在所有页面中保持不变。我首先在自己的文件中独立地编写它们，然后测试每个文件，这样我就知道它们在静态地放置到html文件中时是可以工作的。但是，当我试图使用JQuery loadHTML函数加载它们时，在页面上加载它们时会出现问题。

下面是我的index.html文件供参考：

代码语言：javascript
复制
<!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>

我的NavBar.html

代码语言：javascript
复制
<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文件相同，只是内容略有不同。

我做错了什么，导致文件没有加载？

javascript
html
jquery
css
EN

回答 3

Stack Overflow用户

发布于 2021-03-19 06:01:46

您不需要enhanceWithin调用，所以代码应该如下所示：

代码语言：javascript
复制
$(document).ready(function () {
    $("header").load("NavBar.html");
    $("footer").load("Footer.html");
});

有关详细信息，请查看load方法文档这里。

我还建议检查文件的路径和它们的名称(可能是404个错误)

票数 0
EN

Stack Overflow用户

发布于 2021-03-19 06:18:14

尝试通过dev调试您的问题。通过按F12来控制控制台。你应该会看到几个错误。比如Failed to load resource: net::ERR_FAILED和cors。

您是直接从文件夹运行Are服务器还是index.html？问题是，.load不能直接运行，请在从jquery加载时阅读上面提到的答案。

您将需要通过您的see服务器运行index.html，并且您将看到文件加载所请求的文件。

我收到这条消息：标题

代码语言：javascript
复制
<!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>
票数 0
EN

Stack Overflow用户

发布于 2021-03-19 05:54:51

您也可以简单地使用没有JQuery的

代码语言：javascript
复制
<header>
<include src="My NavBar.html"></include>
</header>

<footer>
<include src="My Footer.html"></include>
</footer>
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66703088

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档