根据用户离线或在线连接更改链接href

Question

我正在将 jqueryUI/jquerymobile 用于 WebApp。有一个按钮可以检查用户是否连接到互联网。不管他是不是链接的href应该改变。我尝试了以下但它不起作用。任何想法为什么？它每次都会打开指向http://test.com 的链接，无论是在线还是离线。

<script type="text/javascript">

    function OnClick () {
        if ('onLine' in navigator) {
            if (navigator.onLine) {
                window.location = "http://test.com/";
            }
            else {
                window.location = "test.html";
            }
        }
        else {
            alert ("Your browser does not support the onLine property.");
        }
    }

</script>

<li class="ui-corner-none nav2"><a href="http://test.com/" onClick="OnClick ()">Link</a></li>

Answer 1

我不知道它背后的逻辑 - 但我的猜测是点击“链接”将首先启动（也就是浏览器首先跟随链接）然后触发 OnClick 事件（这会什么都没有，因为它不再在同一个页面上）。

了解更多信息：JavaScript function in href vs. onclick

我的解决方法是在页面加载时检查您是否连接到互联网并更改链接的“href”属性。

$(function() {
    if ('onLine' in navigator) {
        if (navigator.onLine) {
            $("li.nav2 a").attr("href", "http://test.com/")
        }
        else {
            $("li.nav2 a").attr("href", "test.html")
        }
    }
    else {
        alert ("Your browser does not support the onLine property.");
    }
});

另一个更快的解决方法是

<li class="ui-corner-none nav2"><a href="http://test.com/" onClick="return OnClick ()">Link</a></li>

见：HTML tag <a> want to add both href and onclick working