Question

我遇到了这个问题。我的单独页眉和页脚仅在完全获取js文件中的数据后显示。加载数据时，我可以看到输入（搜索图像）和另一个文本输入，但我看不到页眉和页脚。在执行js文件之前是否有任何关于获取页眉和页脚的建议？

感谢。

<link rel="stylesheet" href="./style.css">
<header>
    <div class="container">
        <div id="branding">
            <a href="../index.html"><img src="../img/icon.png" height="40" width="160"/></a>
        </div>
        <nav>
            <img src="../img/firstFlag.png" height="20" width="30"/>
            <a href="./en.html"><img src="../img/secondFlag.png" height="20" width="30"/></a>
        </nav>
    </div>
</header>

标头文件

{{1}}

Answer 1

尝试一下：

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">        
    <link rel="stylesheet" href="../header/style.css">
    <link rel="stylesheet" href="../footer/style.css">
</head>
<body style="display: none">
    <div id="header"></div>
    <section>
        <div>
            <input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
            <div style="overflow: hidden;">
               <input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
            </div>
        </div>
    </section>
    <div id="footer"></div>
    <script src="../node_modules/jquery/dist/jquery.js"></script>         
    <script src="./main.js"></script>
    <script> 
        $(function(){
            $("#header").load("../header/index.html", function (){
                $("#footer").load("../footer/index.html", function() {
                    $("body").fadeIn(1000);
                }); 
            });                             
        });
    </script>
</body>

Answer 2

如果load方法同步，请尝试更改您的html结构：

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">        
    <link rel="stylesheet" href="../header/style.css">
    <link rel="stylesheet" href="../footer/style.css">
    <script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body style="display: none">
    <div id="header"></div>
    <div id="footer"></div>
    <script> 
       $("#header").load("../header/index.html"); 
       $("#footer").load("../footer/index.html"); 
    </script>
    <section>
        <div>
            <input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
            <div style="overflow: hidden;">
               <input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
            </div>
        </div>
    </section>        
    <script src="./main.js"></script>
</body>

在执行js文件之前加载外部html（单独的页眉和页脚）

2 个答案: