HTML 5导航器在线-重定向，不断制作无限的选项卡

你好，我正在使用html 5应用程序缓存来缓存一些文件以供离线使用。我还在网上使用HTML5导航器，所以当没有互联网时，网站会将用户重定向到另一个页面。问题是，一旦我缓存了我的文件，关闭了我的互联网，一旦我点击重新加载按钮或通过地址栏，它就会弹出无限个选项卡，直到它离线，而我只需要一个选项卡：)

<!DOCTYPE html>
<head>
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">           
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-glyphicons.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<title>Online Drawing for Electricians</title>
</head>              
<body>      
<div class="jumbotron">
<div class="container text-center">
<h1>Online Drawing for Electricians</h1>
<div class="container">
<form class="form-signin" method="post">
<h2 class="form-signin-heading">(Online)Please login in</h2>
<label for="inputtext" class="sr-only">Username</label>
<input name="username" type="text" id="inputtext" class="form-control" placeholder="Username" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<script>
if (navigator.onLine) {
} else {
window.open("http://www.lifeofaris.se/loginjs.php");
}
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>              
</html>

Loginjs.php(离线时的替代页面)

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">           
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-glyphicons.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<title>Online Drawing for Electricians</title>
</head>              
<body>              
<div class="jumbotron">
<div class="container text-center">
<h1>Online Drawing for Electricians</h1>
<div class="container">
<h2 class="form-signin-heading">(Offline)Please login in</h2>
<form class="form-signin" method="post">
<input type="text" id="username" class="form-control">
<input type="password" id="password" class="form-control">
<input type="button" button class="btn btn-lg btn-primary btn-block"value="Log in" onClick="clicked()">
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/login.js"</script>
<script src="js/jquery.js"></script>
<script>
if (navigator.onLine) {
} else {
window.open("http://www.lifeofaris.se/loginjs.php");
}
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>              
</html>

更改

if (navigator.onLine) {
} else {
window.open("http://www.lifeofaris.se/loginjs.php");
}

至：

if (!navigator.onLine) {
window.location ='http://www.lifeofaris.se/loginjs.php'; //edit, should be '=', not a func
}

，在第二页(脱机页)中，删除javascript:

if (navigator.onLine) {
} else {
window.open("http://www.lifeofaris.se/loginjs.php");
}

没有保证，但它应该起作用。

编辑：在第二页(脱机页)中，您缺少一个>:

<script src="/js/login.js"</script>/emsp 应为：

<script src="/js/login.js"></script>

编辑(2)：

页面的原始">垃圾邮件"是由以下片段的重复引起的：

if (navigator.onLine) {
} else {
window.open("http://www.lifeofaris.se/loginjs.php");
}

在第二页(脱机页)。这是因为当你被重定向到离线页面时，在线页面的JS已经确定你处于离线状态，并打开了一个新页面。现在你已经打开了这个离线页面，你仍然有代码来检查你是否离线，因为你是离线的，它将打开一个新的离线页面。

这些新的脱机页面中的每一个都包含相同的代码，用于检查您是否处于脱机状态。由于您正在查看脱机页面，因此您显然处于脱机状态，因此将继续打开新页面，这就是为什么我说要从"脱机"页面中删除该片段。

相关内容

最新更新

热门标签：