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

Posted 2023-03-05

【中文标题】根据用户离线或在线连接更改链接href

【英文标题】：Change link href depending on users connection offline or online

【发布时间】：2013-12-23 13:56:04

【问题描述】：

我正在将 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>

【参考方案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

【讨论】：

谢谢，但它并不完全有效。即使我更改了 a 标签中的 href，test.com 网站也可以正常工作。但是如果我切换到离线浏览器想要再次打开 test.com 而不是 test.html