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已经确定您处于离线状态并打开了一个新页面。现在您已打开此脱机页面，您仍然可以使用代码检查您是否处于脱机状态，并且因为您将打开新离线页面。

这些新的离线页面中的每一个都包含相同的代码，用于检查您是否处于脱机状态，并且由于您正在查看离线页面，因此您显然处于脱机状态，因此将继续打开新页面，这就是我说的原因从“离线”页面中删除代码段。

HTML 5 Navigator Online - 重定向，不断创建无限选项卡

1 个答案: