Javascript 在 HTML 文件中不起作用-6ren

Javascript 在 HTML 文件中不起作用

转载作者：行者123 更新时间：2023-11-28 01:08:11

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

我正在尝试运行以下代码。 “menu.html”在另一个页面的 div 中加载“world.html”，出现 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')";
    }

最佳答案

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

关于Javascript 在 HTML 文件中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38818577/

文章推荐： javascript - 使用 javascript 生成的 Bootstrap 下拉列表

文章推荐： javascript - 将 ajax 响应转换为 ol3 GML 层

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript 在 HTML 文件中不起作用