建立互联网连接后重定向网页答案

【问题标题】：Redirect web page once an internet connection is established建立互联网连接后重定向网页
【发布时间】：2013-03-21 22:15:49
【问题描述】：

我正在为工作构建一个网页信息亭。当计算机启动时，它会立即加载信息亭，但连接到网络大约需要一分钟。用户看到的第一件事是连接错误，因为信息亭尝试访问实时页面，但还没有互联网。自助服务终端浏览器使用 Chrome。

为了防止最初的错误，我正在尝试创建一个本地托管的网页来检查互联网连接并等待建立。然后它重定向到实时页面。

这是最初的离线本地托管页面。它应该从这里重定向到实时页面。显然，在 Chrome 中，navigator.onLine 仅检查 Chrome 是否设置为“在线模式”，但实际上并不测试实时连接。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Kiosk Splash</title>
  <link rel=stylesheet type="text/css" href="jquery/css/ui-lightness/jquery-ui-1.10.2.custom.css">
  <script src="jquery/js/jquery-1.9.1.js"></script>
  <script src="jquery/js/jquery-ui-1.10.2.custom.js"></script>
</head>
<body>
<div id="dialog" style="text-align:center;">
    <p>
        <font font face="verdana" size="5">The Kiosk is establishing a connection to the network...</font>
    </p>
    <div id="progressbar" style="width: 50%; margin: 0 auto;"></div>
</div>
<script>
$( "#dialog" ).dialog({ minWidth: 1000 });
$(".ui-dialog-titlebar-close", this.parentNode).hide();
$( "#progressbar" ).width(800);
$( "#progressbar" ).progressbar({
  value: false
});
while(true){
    if(navigator.onLine){
        window.location.replace("http://stackoverflow.com");
        break;
    }
}
</script>
</body>
</html>

【问题讨论】：

对于初学者，请将您的 while(true) 更改为 interval，因为目前这将阻止 UI 响应。
您在docs on MDN 中发现的内容令人惊叹。 window.addEventListener("online", function(e) {alert("online");}) 并非所有浏览器都完全支持。而且我认为 Firefox 存在一个问题，即您始终在线。 ;)
@epascarello 我应该提到我也尝试过并且得到了相同的结果：它立即触发在线，甚至在连接之前。我想知道“在线”是否只是检测浏览器是否设置为“在线”模式。
取决于浏览器，你用的是什么？

标签： javascript jquery html

【解决方案1】：

我不知道navigator.onLine 它是如何工作的。但它应该尝试连接到服务器并继续尝试直到它连接到服务器。连接重定向后

      function connect(){
      try{
        $.ajax({url:"http://itunes.apple.com/search?term=metallica", // any url which return json
        success: function(){
        location.href = "http://google.com"  
     },
     error: function(e){
         location.href = "http://google.com";
     }, 
       dataType:"json"
   });
}catch(e){
     console.log(e);         
    setTimeout(connect, 5000);
}
} 
connect();

【讨论】：

您是否测试过这是否有效？它不适合我（你也错过了一个括号来关闭 {url} 但它仍然无法使用）
是的，我测试了它，它现在可以工作了。问题是跨域访问限制。
You nytimes 示例 URL 不起作用，但我能够使用 itunes.apple.com/search?term=metallica 作为测试 URL 使您的代码正常工作。不过，我很犹豫是否接受这个答案，因为如果硬编码的 URL 关闭或更改，此网页的代码将会中断。
我知道，你应该提供你的服务器的 url。这样你就可以控制了。
好的，所以这个解决方案不起作用（至少对于 Chrome 不起作用）。当浏览器最初加载时（在建立互联网连接之前），它只尝试一次进行 AJAX 调用并在 javascript 控制台中返回“加载资源失败”。如果您在连接建立后重新加载页面，它就会起作用。

【解决方案2】：

如果 navigator.online 无法正常工作，让我们手动执行此操作。

一种可能性是通过查看您是否可以 ping 您的服务器来检查连接。为此，请设置一个尝试检索数据的 ajax 调用。如果它成功返回，那么您已连接！然后你就可以重定向到新页面了。

$(function() {
  var myVar=setInterval(function(){ pingServer(); }, 1000),
      urlOnServer = "http://www.google.com",
      urlOfHomePage = "http://www.yahoo.com";

  function pingServer() {
    $.ajax({
      url: urlOnServer,
      data: null,
      dataType: 'json',
      success: function(result) {
        window.location = urlOfHomePage;
      }
    });
  } 
});

【讨论】：

我进行了编辑，希望能帮助您使其正常工作。希望有帮助！附言。这些网址需要更改。您必须在后端代码上设置一个方法来处理 ajax 调用。