堆栈内存溢出
  简体   繁体   English

为什么 JQuery LoadHTML function 没有将我的 html 添加到我的页面？

[英]Why is JQuery LoadHTML function not adding my html to my page?

 原文  2021-03-19 05:46:34  1   3    javascript/ html/ jquery/ css

问题描述

I am trying to load html content from another file to my main page using JQuery.我正在尝试使用 JQuery 将 html 内容从另一个文件加载到我的主页。 I am doing this because I have a navigation bar and footer that will be constant throughout all the pages.我这样做是因为我有一个导航栏和页脚，它将在所有页面中保持不变。 I wrote them independently in there own files first and tested each of them so I know they work when they are statically placed into the html file.我首先在自己的文件中独立编写它们并测试了它们中的每一个，因此我知道它们在静态放入 html 文件时可以工作。 However, when I try to load them using JQuery loadHTML function I am having issues getting them on the page.但是，当我尝试使用 JQuery loadHTML function 加载它们时，我无法将它们放在页面上。

Here is my index.html file for reference:这是我的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>

My NavBar.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>

My footer is set up the same way as the NavBar.html file only the content is slightly different.我的页脚设置方式与 NavBar.html 文件相同，只是内容略有不同。
What am I doing wrong that is causing the files to not load up?我做错了什么导致文件无法加载？

3 个解决方案

解决方案1
 0  2021-03-19 06:01:46

You don't need enhanceWithin call, so your code should look like this:您不需要enhanceWithin调用，因此您的代码应如下所示：

$(document).ready(function () {
    $("header").load("NavBar.html");
    $("footer").load("Footer.html");
});

Check load method documentation here for details.在此处查看load方法文档以获取详细信息。

I also suggest checking paths to files and their names (maybe you are getting 404 errors)我还建议检查文件的路径及其名称（也许您遇到 404 错误）

解决方案2
 0  2021-03-19 06:18:14

Try to debug your issue through dev.尝试通过 dev 调试您的问题。 console by pressing F12 .按F12控制台。 You should see several errors.您应该看到几个错误。 Something like Failed to load resource: net::ERR_FAILED and cors .类似Failed to load resource: net::ERR_FAILED和cors的东西。

Are you running a webserver or index.html directly from the folder?您是直接从文件夹运行网络服务器或 index.html 吗？ The problem is .load doesn't run directly please read up on load from jquery as the answer above mentions.问题是.load不能直接运行，请阅读 jquery 的负载作为上述答案。

You will need to run index.html through your webserver and you will see the file load the requested file.您将需要通过您的网络服务器运行 index.html，您将看到文件加载了请求的文件。

I get this as message: header我收到消息： 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

You can simply use without JQuery as well您也可以在没有 JQuery 的情况下简单地使用

<header>
<include src="My NavBar.html"></include>
</header>

<footer>
<include src="My Footer.html"></include>
</footer>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么我的jquery函数无法在页面启动时加载？ - why is my jquery function not loading on page start? 为什么我的jquery数据未显示在HTML页面中 - Why is my jquery data not displaying in my HTML page 为什么 JQuery 会破坏我的 HTML，添加额外的<a>标签？</a> - Why is JQuery breaking my HTML, adding extra <a> tags? 为什么我的 JavaScript/JQuery 添加和删除带有函数的类不起作用？ - Why is my JavaScript/JQuery adding and removing class with function not working? 为什么我的Jquery“点击功能”在页面加载后执行？ - Why my Jquery “click Function” execute after page load? 为什么我的jquery函数在Ajax加载的页面中的div上不起作用 - Why does my jquery function not work on div in page loaded by ajax 将来自JavaScript的视频添加到我的html页面 - Adding a video from JavaScript to my html page 将SVG添加到我的html会产生jQuery错误 - Adding SVGs to my html produces jQuery errors 将选择的JQuery插件添加到我的HTML中 - Adding the Chosen JQuery plugin to my HTML jQuery为什么我的函数不触发 - jQuery why is my function not firing
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM