为什么此网页永远卡在加载程序上？

编程问答 2022-06-03

问题描述

因此，我尝试为区块链应用程序运行以下网页，并且该网页不会超出加载程序。任何人都可以看看并帮助我。它运行在ganache自定义区块链上。

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>BlockVote</title>
  <link rel="shortcut icon" href="img/favicon.svg" type="image/x-icon">

  <link href="css/landing.css" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

  <link href="https://fonts.googleapis.com/css2?family=Arimo&display=swap" rel="stylesheet">
  <header>
    <div id="navbar-custom"></div>

  </header>
</head>

<body oncontextmenu="return false;">
  <div id="nav-placeholder">

  </div>

  <!-- Loader -->
  <div class="row" class="align-middle">
    <div class="col-lg-12 col-sm-12 col-md-12">
      <div id="loader" class="text-center align-middle">
        <div class="spinner-border text-info" role="status">
          <span class="sr-only ">Loading...</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Content   -->
  <div id="content" style="display: none;">
    <div class="container" id="votingPage">
      <div class="row" id="check-web3" style="margin-top: 30px;"></div>
      <div class="row">
        <div class="col-lg-6 col-sm-12">
          <img src="https://image.flaticon.com/icons/svg/927/927250.svg" width="300px" alt="">
        </div>
        <div class="col-lg-6 col-sm-12">
          <div>
            <table class="table table-responsive table-borderless table-hover">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Candidate Name</th>
                  <th>Party</th>
                  <th>Votes</th>
                </tr>
              </thead>
              <tbody id="candidatesResults">
              </tbody>
            </table>
            <hr />
            <form onSubmit="App.castVote(); return false;">
              <div class="form-group">
                <label for="candidatesSelect">Select Candidate</label>
                <select class="form-control" id="candidatesSelect">
                </select>
              </div>
              <button type="submit" class="btn btn-primary btn-success center-block">Vote</button>
              <hr />
            </form>
            <p id="accountAddress" class="text-center"></p>
          </div>
        </div>
      </div><br>
      <div class="row" id="vote-msg" style="margin-top: 30px;">
      </div>
    </div>



  </div>
  <script src="js/navbar.js"></script>
  <script>
    window.addEventListener('load',function() {
  if (typeof web3 !== 'undefined') {
    if (web3.currentProvider.isMetaMask === true) {
      console.log('MetaMask is active')
    } else {
      $('#check-web3').html(`<div class="alert alert-danger text-center" role="alert">
          <span>Please Install Metamask for voting</span>
        </div>`)
    }
  } else {
    console.log('web3 is not found')
  }
})
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>
  <script src="js/web3.min.js"></script>
  <script src="js/truffle-contract.js"></script>
  <script src="js/app.js"></script>

</body>

</html>

[！[在此处输入图片描述] [1]] [1]

输出的屏幕截图： [1]：https://i.stack.imgur.com/sublE.jpg

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascripttwitter-bootstrapweb3js