Question

我在StackOverflow上看到了一些类似的问题，但似乎找不到与我的匹配的问题。

我是编程的新手，但是我已经做了很多事情。我目前正在将所有内容合并到一个站点中。为此，我制作了一个包含导航面板的标题。我有6个不同的html页面，并且我不断对标头重复相同的信息，因此我认为使用JS插入标头可能会更好。在那种情况下，我只需要定义一次标题，并在所有html页面上使它相同。 HTML页面的开头如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Main page</title>
    <meta charset="utf-8" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./index css/index style.css" />
    <script type="text/javascript" src="./index js/index js.js"></script>
</head>

<body>
    <header id="navPanel">
    </header>
<main>
... page content ...
</main>
</body>

某些页面上的脚本更多，但是没有其他针对id="navPanel"的脚本。创建导航面板的JS位于index js.js中。下面的代码是生成导航面板的JS：

window.onload = function setupNav() {
    let navPanel = document.getElementById('navPanel');
    console.log(navPanel);
    document.getElementById('navPanel').innerHTML = '<nav> \
    <ul class="navigation navLinks" id="navBar"> \
        <div class="navTabletFlex"> \
        <img class="logo" src="./images/Logo.png" alt="Logo" /> \
            <li><a href="./index.html">Home</a></li> \
            <li><a href="./construction.html">To Do List</a></li> \
            <li> \
                <div class="dropdownNav" id="dropdownNav"> \
                    <button class="dropbtn" id="dropBtn">Games</button> \
                    <div class="dropdown-content"> \
                        <ul class="navLinksDropdown"> \
                            <li><a href="./rps.html">Rock Paper Scissors</a></li> \
                            <li><a href="./rpsls.html">Rock Paper \
                                    Scissors Lizard Spock</a></li> \
                            <li><a href="./numguess.html">Random Number Guesser</a></li> \
                            <li><a href="./puzzle.html">Puzzle Game</a></li> \
                        </ul> \
                    </div> \
                </div> \
            </li> \
            <li><a href="./construction.html">About me</a></li> \
            <li><a href="./construction.html">Contact</a></li> \
        </div> \
    </ul> \
    <button class="navBarIcon" onclick="toggleNav()"> \
                <i class="fa fa-bars"></i> \
    </button> \
</nav>';
    hightlightCurrentPage();
};

奇怪的是，在index.html，construction.html和numguess.html上，标题正常工作，而在rps.html，rpsls.html和puzzle.html上，标题则无法正常工作。标头存在，当我尝试在控制台中使用document.getElementById('navPanel')定位标头时，可以使用.innerHTML在标头中添加内容。

我尝试将<script type="text/javascript" src="./index js/index js.js"></script>放在</body>标记之前，但无济于事。我在工作页面和非工作页面之间找不到任何区别。所以我希望你们中的一些人有一些我可以寻找的想法。

编辑：以下是其他HTML页面。 puzzle.html（不起作用）

<head>
    <title>Puzzle game</title>
    <meta charset="utf-8" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <script type="text/javascript" src="./index js/index js.js"></script>
    <script type="module" src="./Puzzle app/js/Cell.js"></script>
    <script type="module" src="./Puzzle app/js/Puzzle app js.js"></script>
    <script type="module" src="./Puzzle app/js/PicturePuzzle.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./index css/index style.css" />
</head>

<body>
    <header id="navPanel">
    </header>
... rest of page...

rpsls.html（不起作用）

<head>
    <title>Rock paper scissors lizard spock App</title>
    <meta charset="utf-8" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <script type="text/javascript" src="./Rock paper scissors lizard spock app/js/Rock paper scissors lizard spock app js.js"></script>
    <script type="text/javascript" src="./index js/index js.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./index css/index style.css" />
</head>

<body onload="getComputerPlays()">
    <header id="navPanel">
    </header>
...rest of page

rps.html（不起作用）

<head>
    <title>Rock paper scissors App</title>
    <meta charset="utf-8" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <script type="text/javascript" src="./Rock paper scissors app/js/Rock paper scissors app js.js"></script>
    <script type="text/javascript" src="./index js/index js.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./index css/index style.css" />
</head>

<body onload="getComputerPlays()">
    <header id="navPanel">
    </header>
...rest of page

construction.html（工作）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./index css/index style.css">
    <script text="text/javascript" src="./index js/index js.js"></script>

    <title>Under Construction</title>
</head>

<body class="construction">
    <header id="navPanel">
    </header>
...rest of page

numguess.html（正在工作）

<head>
    <title>Random Number Guessing Game</title>
    <meta charset="utf-8" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <script src="./Random Number Guesser/js/Random Number Guesser Script.js"></script>
    <script type="text/javascript" src="./index js/index js.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./index css/index style.css" />
</head>

<body>
    <header id="navPanel">
    </header>
...rest of page

Answer 1

在您的js文件中，将其内容放置在一个函数调用中，该函数将侦听正确的时刻以正确采取行动：

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
  // somewhere here goes your content
});

发生的事情是浏览器开始解析从上到下看到的数据，并尽快开始处理它。但是，通过将您编写的JS放置在该函数中，您可以告诉浏览器“读完并加载页面后立即调用它。”

来源：

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Javascript函数仅调用一半时间

1 个答案: