如何在加载网页之前在 Chrome 中检查初始 Internet 连接答案

【问题标题】：How to Check for an Initial Internet Connection in Chrome before loading a Web Page如何在加载网页之前在 Chrome 中检查初始 Internet 连接
【发布时间】：2013-03-11 06:18:03
【问题描述】：

我正在构建一个网络信息亭。计算机启动并直接进入 Chrome。浏览器在建立网络连接之前加载，因此用户总是看到的第一件事就是连接错误。

我正在尝试创建一个初始的本地托管网页，等待连接建立，然后将页面重定向到网络上托管的实时网页。

我试过了：

navigator.onLine

但在 Chrome 中，这仅检查浏览器是否处于“在线模式”，而不是实际连接是否有效。结果是它总是重定向到没有连接的实时页面，并且用户收到连接错误。

我尝试过 AJAX 请求，但结果总是：

Access-Control-Allow-Origin 不允许Origin http://localhost

我无法使用任何标志来启动 Chrome 以禁用此功能。它必须是 Chrome 的默认风格。

所以我的问题是：这个问题有有效的解决方案吗？我愿意使用 Javascript / JQuery / PHP / HTML 等的任意组合。

这是我本地托管网页的代码：

<!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
});
      function connect(){
      try{
        $.ajax({url:"http://intranet/webpage",
        statusCode: {
    200: function() {
      window.location.replace("http://live/webpage");
    }
  },
     error: function(e){
         console.log(e);
         setTimeout(connect, 5000);
     }, 
       dataType:"json"
   });
}catch(e){
     console.log(e);         
    setTimeout(connect, 5000);
}
} 
connect();
</script>
</body>
</html>

【问题讨论】：

你需要在pc上运行一个web服务器（php或者其他sside语言）来代理ajax请求
你能运行本地网络服务器吗？您可以尝试在 localhost 上运行 node.js 并从那里提供本地页面；您的节点服务器可能会尝试测试后端的连接性（绕过 Chrome 的安全性）。连接后，节点服务器可以向浏览器推送通知。
查看 Origin localhost is not allowed by Access-Control-Allow-Origin here 的答案：- 看看它是否有帮助。 stackoverflow.com/questions/15534640/…
为什么不直接延迟 chrome 呢？另一件事是网络处于延迟启动模式，您可以将其移至更早的位置
我要做的是设置一个带有递归 ping 的 while 循环，并在 ping 返回暗示互联网连接的内容后打开 chrome。

标签： php javascript jquery html

【解决方案1】：

JSONP 和 jquery 的一个相当肮脏的 hack

使用 jsfiddle jsonp 测试：

(function testConnection() {
  setTimeout(testConnection, 2000);
  $.getJSON("http://jsfiddle.net/echo/jsonp/?callback=redirect&cb=?");
})()

function redirect() {
   window.location = 'http://www.google.com'; // REDIRECT TARGET
}

第一个版本：

(function testConnection() {
    setTimeout(testConnection, 2000);
    $.getJSON(
       "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
       {format:'json'}
    ).done(function(result){
        window.location = 'http://www.google.com'; // REDIRECT TARGET
    });
})()

按预期工作，您可能希望拥有自己的网络服务器，以免依赖特定的 API

【讨论】：

不错的尝试，但 flickr 在我们的办公室被网络过滤阻止了。另外，我只是猜测，这会导致同样的 Acces-Control-Allow-Origin 错误。
随便找个没有被屏蔽的jsonp api，或者自己做个页面。同源策略不是问题，因为它是 jsonp 请求
+1，这就是我的建议。只是一个简单的页面，如果可以到达则回显loadPage();，否则什么都没有。
@DavidFregoli 我没有任何编写 jsonp api 来制作自己页面的经验。你能指出我正确的方向吗？您的解决方案有效，但我不愿依赖可能更改其地址的外部网站。
呵呵，你不需要写API，只需要一个返回'redirect()'并像'www.domain.com/file.txt'一样调用它的URL（甚至是静态文件）。 cb=?'

【解决方案2】：

此行为旨在防止从 localhost 连接的恶意脚本，当然，当您尝试实施信息亭时，这只是一种痛苦。

我认为您需要做的与这个完全不同的问题中的答案相同：Origin is not allowed by Access-Control-Allow-Origin

Matt Mombrea 建议如下：

Access-Control-Allow-Origin: *

“这将允许跨域 AJAX。在 PHP 中，您需要像这样修改响应：”

<?php header('Access-Control-Allow-Origin: *'); ?>

然后，您可以轮询您控制的在线服务器，该服务器使用此访问控制权限进行响应，以查看您的互联网连接是否已打开。

否则，您可以使用 localhost PHP 服务器脚本尝试访问服务器，并让您的 ajax localhost 页面查询 localhost 脚本以获取答案。

【讨论】：