Javascript 在 HTML 文件中不起作用答案

【问题标题】：Javascript is not working in HTML fileJavascript 在 HTML 文件中不起作用
【发布时间】：2016-12-13 14:25:51
【问题描述】：

我已阅读有关此主题的可用链接，但它们没有帮助。

我正在尝试运行以下代码。 “menu.html”将“world.html”加载到另一个页面的 div 中，然后 HTML 出现了，但 JavaScript 没有出现。

起初我将 JS 放在一个单独的文件中，但当它没有运行时，我将它移到“world.html”中，但它并没有解决问题。我也尝试过引用 jQuery。

这是 menu.html：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="layout.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="contact.js"></script>
        <script src="preparePage.js"></script>
    </head>

    <body>
        <a id="infoButton" class="infoButton" href="info.html"></a>
        <a id="bodyButton" class="bodyButton" href="body.html"></a>
        <a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a>
        <a id="leaveButton" class="leaveButton" href="leave.html"></a>
        <a id="contactButton" class="contactButton" onclick="contact(); return false;"></a>
    </body>

    <footer>
    </footer>
</html>

还有preparePage.js，它摆脱了菜单并加载了world.html：

function preparePage() {
    document.getElementById("box").style.backgroundImage = "none";
    $("#infoButton").fadeOut("slow");
    $("#bodyButton").fadeOut("slow");
    $("#leaveButton").fadeOut("slow");
    $("#contactButton").fadeOut("slow");
    $("#box").load("world.html", function enter() {
        $("#enterButton").fadeOut("slow");
    });
}

最后但同样重要的是，world.html：

<!DOCTYPE html>

<html>
    <head>
        <script type="text/javascript">
        function wut() {
            window.alert("owo");
        }
        </script>
    </head>

    <body onload="wut(); return false;">
        mhfkhgfhtfjhfjj<br><br>
        <canvas id="gameBox" width="1000" height="500" style="background-color:#ffffff;"></canvas>
    </body>

    <footer>
    </footer>
</html>

编辑：还包括launchpad.html，它是包含加载menu.html和world.html的div的页面：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="layout.css">
        <link rel="stylesheet" type="text/css" href="menu.css">
    </head>

    <body onload="openGame(); return false;">
        <div id="cloud"></div>
        <div id="box" class="box"></div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="openGame.js"></script>
    </body>

        <footer>
        </footer>
</html>

还有openGame.js，它会改变#box的形状并加载menu.html：

    function openGame() {
        $("#cloud").fadeOut("fast");
        $("#box").animate({
            height: '750px',
            width: '1700px',
            top: '100px',
            left: '100px',
            padding: '0px'
        });
        $("#box").load("menu.html");
        document.getElementById("box").style.backgroundImage = "url('Images/menuBackground.png')";
    }

【问题讨论】：

你没有id为box的元素。
代码 Html 中没有 #box 元素
menu.html 和 world.html 已经在#box 中。 #box 在一个名为launchpad.html 的页面上，我有另一个名为openGame.js 的脚本，它改变#box 的大小并加载menu.html。
那么请编辑您的问题并添加此信息。您在问题中提供的代码应该足以重现问题。
您为 openGame.js 提供了错误的文件。

标签： javascript html

【解决方案1】：

除了您没有 ID 为 box 的元素这一显而易见的事实之外，请注意 jQuery load 方法不会触发您在中定义的 onload 回调world.html。所以你需要自己调用它。

所以解决两件事：

定义box，例如
```
<div id="box"></div>
```

调用wut()，来自menu.html：

$("#box").load("world.html", function enter() {
    wut();
    $("#enterButton").fadeOut("slow");
});

world.html 中的onload= 在这样加载时无效，因为对于浏览器来说只有一个文档已经加载。所以，没有第二个load事件触发。

或者，您也可以在 world.html 中添加一个脚本，在结束 </body> 标记之前的末尾附近，将运行：

<script>
    wut();
</script>

【讨论】：

谢谢，这成功了！因此，如果我使用 jQuery 加载 HTML，它不一定会调用我在该文件中的 JavaScript？我是否有可能在某篇文章中找到更多有关此内容的信息？
jQuery 将使用其load 方法执行JavaScript，因此定义了wut 函数。但它永远不会被调用，因为它只会在文档加载时被调用（它与onload 绑定）。然而，该事件不会被触发，因为文档（它是整个内容，不仅是 world.html）已经加载。我将此信息添加到答案中。

【解决方案2】：

我会使用 JQuery 来处理点击事件，并确保您在脚本中引用的所有元素 id 都存在于页面中。要检查的另一件事是您的脚本是否正确加载，文件名的字母大小写在 Linux 服务器上很重要。

HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="layout.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="contact.js"></script>
    <script src="preparePage.js"></script>
</head>
<body>
<ul id="menu">
<li><a id="infoButton" class="infoButton" href="info.html">test1</a></li>
<li><a id="bodyButton" class="bodyButton" href="body.html">test2</a></li>
<li><a id="enterButton" class="enterButton">test3</a></li>
<li><a id="leaveButton" class="leaveButton" href="">test4</a></li>
<li><a id="contactButton" class="contactButton">test5</a></li>
</ul>
<div id="box" style="width:500px; height:500px; background-color:#FFF; background-image:url(http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a);">
test box
</div>
<footer>
</footer>
</body></html>

Javascript：

    $( document ).ready(function() {
      $( "#enterButton" ).click(function() {
        document.getElementById("box").style.backgroundImage = "none";
        $("#infoButton").fadeOut("slow");
        $("#bodyButton").fadeOut("slow");
        $("#leaveButton").fadeOut("slow");
        $("#contactButton").fadeOut("slow");
        $("#box").load("/zalun/VkCyH/app.html", function enter() {
          $("#enterButton").fadeOut("slow");
        })
     })
  });

现场示例：https://jsfiddle.net/ucjs77L8/

【讨论】：