时间戳

首页 > 解决方案 > 无法从外部 html 文件加载字体真棒

javascript - 无法从外部 html 文件加载字体真棒

问题描述

我正在尝试为我的网页制作导航栏。在我的主要 index.html 文件中，我有

<!DOCTYPE html>
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./design.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="./load-assets.js"></script>
</head>
<body>
    <div id="main-container">
        <header id="header-container">
        </header> <!-- /header-container-->

        <nav id="navigation-container">
        </nav> <!-- /navigation-container -->

        <footer id="footer-container">
        </footer> <!-- footer-->
    </div>
</body>

我在其中获取 load-assets.js 文件来为页眉、导航和页脚加载不同的 html 代码。
load-assets.js 加载这些不同的文件：

window.addEventListener("load", $(function() {
    $("#header-container").load("/assets/header.html");
    $("#navigation-container").load("/assets/navigation.html");
    $("#footer-container").load("/assets/footer.html");
}))

在我的 navigation.html 中，我引用了其他页面：

<input type="checkbox" id="check">
<label for="check">
    <i class="fas fa-bars"></i>
</label>

<ul id="navigation">
    <li><a href=/index.html>Home</a></li>
    <li><a href=/about.html>About</a></li>
    <li><a href=/event.html>Event</a></li></li>
    <li><a href=/products.html>Products</a></li>
    <li><a href=/faq.html>F&Q</a></li>
</ul> <!-- /navigation -->

问题是，当我有这段代码时：

<input type="checkbox" id="check">
<label for="check">
    <i class="fas fa-bars"></i>
</label>

在主 index.html 文件中调用，它正确地获取字体真棒图像。
但是当我在单独的 navigation.html 文件中有代码时，图像不会加载。
简而言之，我想在调用 index.html 中的所有在线脚本后调用 load-assets.js，但不知道该怎么做。（我是 html/css/js 的新手，所以我仍然不熟悉 DOM 以及页面中元素的加载顺序。）

标签： javascripthtmljquery

解决方案

推荐阅读