显示相关内容答案

【问题标题】：Displaying relevant content显示相关内容
【发布时间】：2013-05-21 22:02:26
【问题描述】：

我想根据最终用户使用的设备显示正确的脚本并隐藏此代码的错误脚本。

    <ul class="pageitem">
<li class="button iphone"><input name="Submit" value="App Downloads" onclick="window.location='appiphone.html' " type="submit" /></li>
<li class="button ipad"><input name="Submit" value="App Downloads" onclick="window.location='appipad.html' " type="submit" /></li>
<li class="button android"><input name="Submit" value="App Downloads" onclick="window.location='appandroid.html' " type="submit" /></li>
</ul>

现在我有了这段代码，可以将设备重定向到我不再需要的特定页面。

<script type="text/javascript">
if (screen.width>801)
{
window.location="http://www.xclo.co.uk/PC.html"
}
</script>
<script type="text/javascript"> // <![CDATA[
    if ( (navigator.userAgent.indexOf('Android') != -1) ) {
        document.location = "android.html";
    } // ]]>
</script>
<script type="text/javascript"> 
var iphone = ((window.navigator.userAgent.match('iPhone'))||(window.navigator.userAgent.match('iPod')))?true:false;
var ipad = (window.navigator.userAgent.match('iPad'))?true:false;
if(iphone){
 document.location = 'iphone.html';
}
if(ipad){
 document.location = 'ipad.html';
}
</script>

请有人帮我让这个脚本显示相关内容而不是重定向。

谢谢。

【问题讨论】：

标签： javascript android ios mobile browser-detection

【解决方案1】：

试试这个：

<ul class="pageitem">
    <li class="button iphone" id="iphone"><input name="Submit" value="App Downloads" onclick="window.location='appiphone.html';" type="submit" /></li>

    <li class="button ipad" id="ipad"><input name="Submit" value="App Downloads" onclick="window.location='appipad.html';" type="submit" /></li>

    <li class="button android" id="android"><input name="Submit" value="App Downloads" onclick="window.location='appandroid.html';" type="submit" /></li>
</ul>

和

<script type="text/javascript">
    function mayShowElement(id, shouldShow)
    {
        document.getElementById(id).style.display = shouldShow ? 'block' : 'none';
    }

    var userAgent = window.navigator.userAgent;

    var MOBILE = {
        IS_IPHONE : userAgent.match('iPhone') || userAgent.match('iPod'),
        IS_IPAD   : userAgent.match('iPad'),
        IS_IPHONE : userAgent.indexOf('Android') != -1
    };

    mayShowElement('iphone', MOBILE.IS_IPHONE);
    mayShowElement('ipad', MOBILE.IS_IPAD);
    mayShowElement('android', MOBILE.IS_ANDROID);
</script>

在我看来，根据您的代码，这是一个很好的解决方案（未经测试）。

【讨论】：