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

Question

I'm building a web kiosk. 我正在建立一个网络信息亭。 The computer boots and goes right into Chrome. 电脑启动并直接进入Chrome。 The browser loads before a network connection is established, so the first thing a user always sees is a connection error. 浏览器在建立网络连接之前加载，因此用户始终看到的第一件事是连接错误。

I'm trying to make an initial, locally hosted webpage that waits for the connection to be up, then redirects the page to the live webpage hosted on the network. 我正在尝试创建一个等待连接启动的初始本地托管网页，然后将页面重定向到网络上托管的实时网页。

I've tried: 我试过了：

navigator.onLine

But in Chrome this only checks if the browser is in 'online mode,' not if there is actually a working connection. 但在Chrome中，这仅检查浏览器是否处于“在线模式”，而不是实际上是否存在有效连接。 The result is that it always redirects to the live page with no connection and the users get a connection error. 结果是它总是重定向到没有连接的实时页面，并且用户得到连接错误。

I've tried AJAX requests, but the result is always: 我尝试过AJAX请求，但结果总是如此：

Origin http://localhost is not allowed by Access-Control-Allow-Origin Access-Control-Allow-Origin不允许使用origin http://localhost

I can't boot Chrome with any flags to disable this. 我无法使用任何标志启动Chrome以禁用此功能。 It has to be the default flavor of Chrome. 它必须是Chrome的默认风格。

So my question: Is there a working solution to this problem? 所以我的问题是：这个问题有解决方案吗？ I am willing to use any combination of Javascript / JQuery / PHP / HTML , etc. 我愿意使用Javascript / JQuery / PHP / HTML等任意组合。

Here is the code for my locally hosted web page: 这是我本地托管网页的代码：

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

Answer 1

A quite dirty hack with JSONP and jquery 一个非常肮脏的黑客与JSONP和jquery

using jsfiddle jsonp test: 使用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
}

first version: 第一版：

(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
    });
})()

Works as expected, you might wanna have your own your own web server in order not to rely on a specific API 按预期工作，您可能希望拥有自己的Web服务器，以便不依赖于特定的API

Answer 2

This behavior is intended to protect from a malicious script connecting from localhost, of course when you are trying to implement a kiosk this is just a pain. 此行为旨在防止从localhost连接的恶意脚本，当然，当您尝试实现自助服务终端时，这只是一种痛苦。

I THINK what you need to do is the same as the answer in this rather different question: Origin is not allowed by Access-Control-Allow-Origin 我认为你需要做的是与这个相当不同的问题中的答案相同： Access-Control-Allow-Origin不允许使用Origin

Matt Mombrea suggests something like this: Matt Mombrea建议这样的事情：

Access-Control-Allow-Origin: *

"This will allow cross domain AJAX. In PHP you'll want to modify the response like so:" “这将允许跨域AJAX。在PHP中你需要像这样修改响应：”

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

You can then poll the online server you control that responds with this access control allowance to see if your internet connection is on yet. 然后，您可以轮询您控制的在线服务器，使用此访问控制权限进行响应，以查看您的互联网连接是否已启用。

Otherwise you could use a localhost PHP server script to try to access a server, and have your ajax localhost page query the localhost script for the answer. 否则，您可以使用localhost PHP服务器脚本尝试访问服务器，并让您的ajax localhost页面查询localhost脚本以获取答案。

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-03-21 16:27:42

解决方案2
0 2013-03-21 16:21:13

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-03-21 16:27:42

解决方案2 0 2013-03-21 16:21:13

解决方案1
2 已采纳 2013-03-21 16:27:42

解决方案2
0 2013-03-21 16:21:13