Question

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

我试图让以下代码运行。＆＃34; menu.html＆＃34;加载＆＃34; world.html＆＃34;在另一个页面上的div中，HTML出现了，但不是JavaScript。

起初我把JS放在一个单独的文件中，但是当它没有运行时我把它移到了＆＃34; world.html＆＃34;，但它没有解决问题。我也试过引用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，这是包含div的页面，其中menu.html和world.html加载：

<!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')";
    }

Answer 1

我会将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/

Answer 2

除了显而易见的事实，即您没有标识为box的元素，请注意jQuery 加载方法不会触发onload回调您已在 world.html 中定义。所以你需要自己打电话。

所以解决两件事：

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

从 menu.html 调用wut()：

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

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

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

<script>
    wut();
</script>

Javascript无法在HTML文件中使用

2 个答案: