Javascript - 根据设备更改按钮图像答案

【问题标题】：Javascript - Changing button image depending on deviceJavascript - 根据设备更改按钮图像
【发布时间】：2012-10-25 17:45:13
【问题描述】：

我正在尝试根据用户浏览页面的设备显示正确的按钮和链接。如果 android 显示 android app store 按钮，如果 ios 显示 apple store 按钮。

我似乎根本无法让它交换，即使我将函数默认设置为将其从 android 按钮交换为苹果按钮。

代码如下：

<html>
<head>
    <script type="text/javascript">

        var uagent = navigator.userAgent.toLowerCase();
        var apple = "/images/ios.jpg";
        var android = "/images/android.jpg"


        function DetectDevice() {
            var but = document.getElementById("AppButton");
            if(useragent.search("iphone") || useragent.search("ipod") || useragent.search("ipad")) {
                toswap.src = apple;
                alert("apple");
            } else if(useragent.search("android")) {
                toswap.src = android;
                alert("android");
            }
            but.src = apple;
        }
        DetectDevice();
    </script>

    <title>Device Detection</title>
</head>

<div id="butttons">
    <img src="images/android.jpg" name = "AppButton" id="AppButton"/>
</div>

【问题讨论】：

标签： javascript android jquery ios button

【解决方案1】：

两个问题：

首先，您的函数需要在按钮加载后运行，因为

document.getElementById("AppButton");

目前没有返回任何内容。

其次，您可能应该将toswap.src 的2 个实例更改为but.src。

【讨论】：

【解决方案2】：

我不知道 var toswap 指的是哪里。试试这个：

        var uagent = navigator.userAgent.toLowerCase();
        var apple = "/images/ios.jpg";
        var android = "/images/android.jpg"


        function DetectDevice() {
            var but = document.getElementById("AppButton");
            if(useragent.search("iphone") || useragent.search("ipod") || useragent.search("ipad")) {
                but.src = apple;
                alert("apple");
            } else if(useragent.search("android")) {
                but.src = android;
                alert("android");
            } else{
                but.src = apple; // this is default
            }
        }

    </script>

<div id="butttons">
    <img src="images/android.jpg" onload="DetectDevice();" name = "AppButton" id="AppButton"/>
</div>

【讨论】：

【解决方案3】：

useragent 也没有定义。您可能打算使用您定义的uagent，或者您可能打算重命名您的变量。

【讨论】：