HTML 5 Navigator Online - 重定向，不断制作无限标签

Question

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

Login.php

<!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>

Answer 1

改变

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> 应该是：

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

编辑 (2):

页面最初“垃圾邮件”的原因是重复以下代码段：

if (navigator.onLine) {

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

在第二页（离线页）。这是因为当你被重定向到离线页面时，在线页面的JS已经计算出你处于离线状态并打开了一个新页面。现在你已经打开了这个离线页面，你仍然有检查你是否离线的代码，既然你离线了，它将打开一个 new 离线页面。

这些新的离线页面中的每一个都包含相同的代码来检查您是否离线，并且由于您正在查看离线页面，因此您显然处于离线状态，因此会不断打开新页面，这就是为什么我据说要从 'offline' 页面中删除代码段。

HTML 5 Navigator Online - 重定向，不断制作无限标签

HTML 5 Navigator Online - Redirect ,keeps making infinite tabs

html

javascript

php

jquery

caching