php - 如何在加载网页之前检查 Chrome 中的初始互联网连接

标签 php javascript jquery html

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

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

我已经尝试过:

navigator.onLine

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

我尝试过 AJAX 请求,但结果总是:

Origin http://localhost is not allowed by Access-Control-Allow-Origin

我无法使用任何标志来启动 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>

最佳答案

使用 JSONP 和 jquery 进行的相当肮脏的黑客

使用 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

关于php - 如何在加载网页之前检查 Chrome 中的初始互联网连接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15552603/

相关文章:

php - 如果缺货,则在特定的 WooCommerce 产品页面中输出自定义代码

php - 如何制作5个总和为100的随机数

php - Magento CMS : Configurable Products -> Images

javascript - Jquery 倒计时器仅在页面上加载一次

jquery - 带有 jQ​​uery 库引用的 &lt;script&gt; 标签必须位于 <head> 或 <body> 标签内吗?

javascript - 下拉菜单打开另一个下拉菜单 - CodeIgniter

php - 如何在同一端口上使用 node.js 和 php

javascript - 读取设置文件并在 node.js 中评估

javascript - 无法获取/使用 gulp-connect-php

javascript - 如果页面上不存在特定类,则添加类