Question

我正在开发一个关于phonegap的iphone应用程序，我正在使用jQuery mobile。我想在页面上实现一个简单的功能，比如在我的html页面上按下按钮，检查我是否有互联网连接。如果是，请继续下一页，显示错误页面。

我包含了这些库：

<link rel="stylesheet" type="text/css" href="lib/jquery.mobile-1.0b1.min.css" />
    <script type="text/javascript" src="lib/jquery-1.6.1.js"></script>  
    <script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.1.min.js"></script>
    <script type="text/javascript" src="functionality.js"></script>
    <script type="text/javascript" src="lib/jquery.mobile-1.0b1.min.js"></script>

我的page1.html的html代码是：

<a href = "#map_page" id='map_button' data-role="button" onclick = "connection();">Go!</a>

现在，functional.js文件包含了根据phonegap的文档编写的connection（）函数：

function connection(){
alert('checking...');
// check if there is internet connection
navigator.network.isReachable("google.com", isNetworkAvailable, {});

}

function isNetworkAvailable(status) {
     var networkState = status.code;
     alert('Connection Type ' + networkState + ' - ' + status.message); }

问题是我从未进入connection（）函数，即使在我的html页面中使用以下脚本时也是如此：

$（'＃map_button'）。click（function（event）{ checkConnection（）}）;

我已经在这段代码上工作了几天而却无法使它工作。我真的很感谢你的帮助...

Answer 1

我也在检查连接时遇到了问题但是找到了另一种方法，使用var networkState = navigator.network.connection.type;我的实现方式完全不同，将切换功能绑定到我的所有链接。因为它可能对deviceReady方法感兴趣，所以我绑定所有链接来调用一个函数，该函数将决定链接是否需要连接检查。跳到连接东西的第二个功能！

 function onDeviceReady()
{

    //Bind all links and intercept them before they go anywhere //I'm jquery dependant 
    $('a').bind('click', function(event) {
        switch($(this).attr('id'))//using the id value of the link we help us decide what kidn of action we are doing
        {
            case "data-loader-page":
                return event;
            break;

            case "load-version-data": //I'm about to pull JSON data from a server

                if(!checkConnection()){return false}; //check for connection and exit if it fails.

                doJSON(); //at this point we have a connection so go get remote data.
                return false;
            break;

            //for un-handled links we will assume that you just want to hash bang
            default: return event;
        }
    }); 
}

此功能对我来说效果很好，如果需要，可以在onclick事件中内联调用。它也不依赖于jquery。

function checkConnection() {
    var networkState = navigator.network.connection.type;

    var states = {};
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 2G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.NONE]     = 'No network connection';

    if(states[networkState]==states[Connection.NONE] || states[networkState]==states[Connection.UNKNOWN]){
        alert('A network connection is required to access this page.');
        return false;
    } else {
        return true;    
    }
}

我是jquery / jquery依赖移动

<div data-role="page" data-theme="b" id="sql-manager-page">
    <div data-role="header">
        <h1>SQL Manager</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li><a href="#data-loader-page" id="data-loader-page">Data Loader</a></li>
                <li><a href="#load-version-data" id="load-version-data" rel="external">Load version data</a></li>
        </ul>


    </div>
    <div data-role="footer">
        <h4> <a href="#privacy-page">Privacy</a></h4>
    </div>
</div>

不是我所知道的最优雅的例子，但我希望这会有所帮助;

Answer 2

您是否尝试过将HTML更改为：

<a href="#map_page" id='map_button' data-role="button" onclick="connection">Go!</a>

没有()？通常，如果添加()，它将执行该函数并将其替换为该函数的返回值。虽然我在HTML onclick属性中没有100％肯定。值得一试。

您的第二次尝试看起来像错误的函数名称checkConnection() vs connection()

使用jQuery mobile和phonegap的Javascript无法按预期工作

2 个答案: