我有 3 个 html 文件 - start.html、loginPage.html 和 dashboard.html。单击登录按钮时，它应该会加载仪表板，但我无法访问该按钮。
开始.html
<html>
<head>
<meta http-equiv="Content-Security-Policy">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Amazon App</title>
</head>
<body onload="init()">
<br><br>
<div id='content'>
<center><img src='img/splashlogo.png'/><center>
</div>
<script src="cordova.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script src="require.js"></script>
<script src="aws-sdk-2.1.34.min.js"></script>
<script src="js/check.js"></script>
</body>
</html>
登录页面.html
<link rel="stylesheet" href="css/index.css"/>
<SCRIPT TYPE="text/javascript">
function setValues(){
$("#accessKey").val('MY-ACCESS-KEY');
$("#secretKey").val('MY-SECRET-KEY');
}
</SCRIPT>
<div data-role="page" id="start" data-enhance="false" style = 'background: url(../img/BG.png);'>
<div data-role = "content">
<br><br>
<div align="right">
<img src="./img/help-icon.png" onClick= "setValues()"/>
</div>
<div align = "center">
<img src="./img/Logo login screen.png" height="200" width="170"/>
</div>
<br><br>
<form id="loginForm" align = "center" data-ajax="false">
<div id="user" align = "center">
<input class="amazeFont" type="text" id = "accessKey" Placeholder="Access Key (20 characters)" size="30" maxlength="128" tabindex="1" autocomplete="on" autocorrect="off" autocapitalize="off" data-validation="[NOTEMPTY]"/>
</div>
<br><br>
<div id = "pass" align = "center">
<input class="amazeFont" type="password" id = "secretKey" Placeholder = "Secret Key (40 characters)" size="30" maxlength="1024" autocomplete="on" tabindex="2" data-validation="[NOTEMPTY]"/>
</div>
<br><br>
<center><button type = "submit" id="submitButton" style='width: 80%; height: 40px; background-color: #f15a29; font-weight: bold; color: white; cursor: pointer;'>Login</button></center>
</form>
</div>
</div>
<script src="cordova.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script src="require.js"></script>
<script src="aws-sdk-2.1.34.min.js"></script>
<script src="js/fun.js"></script>
<script src="js/check.js"></script>
JS:
function init(){
document.addEventListener("deviceReady", onDeviceReady,false);
}
function onDeviceReady(){
window.location = 'loginPage.html';
document.getElementById('submitButton').addEventListener("click", startApp,false);
}
function startApp(){
alert('switching page');
window.location= 'dashboard.html';
}
登录页面不会切换到仪表板页面。它会重新加载。未捕获按钮单击。我想让页面滑动。
已编辑:
更新后的js:
function init(){
document.addEventListener("deviceReady", onDeviceReady,false);
}
function onDeviceReady(){
window.location = 'loginPage.html';
}
为 loginPage.html 创建了第二个 js 并将其添加到 loginPage.html 的主体
function init(){
document.addEventListener('deviceReady', onDeviceReady, false);
}
function onDeviceReady(){
document.getElementById('submitButton').addEventListener("click", startApp,false);
}
function startApp(){
//alert('switching page');
window.location= 'dashboard.html';
}
dashboard.html 没有被调用
最佳答案
您正在从 start.html 调用 init() 方法，其中 onload 调用 function onDeviceReady() 位置发生变化，因此加载其他页面。
您需要添加 document.getElementById('submitButton').addEventListener("click", startApp,false); 当 loginPage.html(可能在不同的函数中)页面加载时而不是开始时。加载 html。
希望对您有所帮助。
关于javascript - 即使在单击按钮后页面也会重新加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30955212/