如果用户在 iOS 设备上，隐藏 HTML 元素？答案

【问题标题】：Hide HTML element if user is on an iOS device?如果用户在 iOS 设备上，隐藏 HTML 元素？
【发布时间】：2013-05-31 10:54:32
【问题描述】：

我希望代码检查用户是否在 iOS 设备上，如果不在，则隐藏 HTML 输入类型“播放”按钮。

因此，在我的代码中，我确定我的 iOS 检查是否错误，隐藏“播放”按钮的代码是否错误，或两者兼而有之：

<!DOCTYPE html>
<html>    
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>                               

<script type="text/javascript">             
    var iOS = false,
    p = navigator.platform;

    if( p === 'iPad' || p === 'iPhone' || p === 'iPod' ) {
      iOS = true;
    }               
    if (iOS === false) {                    
      $("input").hide();
    }
</script>

<script type="text/javascript">
    function load() {
        var vid = document.getElementById('vid');
        vid.addEventListener('ended', function() {
          /*    alert('video ended'); */
          /*   vid.load(); */
        },false);
    }
</script>

<title>NEW ENTRY TEST</title>
</head>

<body>

<body onload="load();">

<video id="vid" src="http://awp.diaart.org/ali/test/movies/testmovie.mov" width="640" height="480" autoplay></video>
<br>
<input type="submit" value="Play" onclick="document.getElementById('vid').play();">

</body>

</body>

</html>

基本上，我只想在用户使用 iOS 设备时显示此播放按钮。

我知道它不起作用，因为播放按钮仍显示在普通（非 iOS）计算机上。

很想听听任何人对此的想法。

【问题讨论】：

怎么不工作？你检查过p 的值吗？在 iOS 设备和非 iOS 设备上试过了吗？
您好 Zenith，感谢您的回复。 “播放”按钮仍会在普通计算机上加载，因此无法正常工作。
另外，我对 Javascript 非常陌生。如何检查p 的值？经过数小时的研究，我将代码拼凑在一起。

标签： javascript jquery ios html

【解决方案1】：

jsFiddle example here.

首先，它应该被包裹在一个$(document).ready中：

$(document).ready(function(){  
  var iOS = false,
  p = navigator.platform;
  if( p === 'iPad' || p === 'iPhone' || p === 'iPod' ) {
     iOS = true;
  }
  if (iOS === false) {
     $("input[type=button]").hide();
  }
});

现在，您剩下的唯一潜在问题是使用navigator.platform 的检查案例。

根据规范，navigator.platform 返回以下值之一： “Win32”、“Linux i686”、“MacPPC”、“MacIntel” - 没有一个符合您的检查案例。

然而，互联网上的其他来源seem to suggest 确实在各自的设备上返回“iPhone”、“iPad”等。由于我没有这些设备之一，因此我无法测试该理论。但如果它没有按建议工作，还有其他记录在案的方法来检测 iPhone、iPad 和 iPod - 请参阅Detect iPad users using jQuery?。

一旦您测试了检测所有三种 iOS 产品的解决方案，请将其存储在您的 p 变量中，您的代码应该可以正常运行。

旁注：

您应该只有一个<body>，并且可以将两个单独的<script> 合并为一个。
您不需要<!DOCTYPE html> 和<html>。删除<html>。
<input> 应该在 <form> 中使用。
我还将输入的类型从submit 更改为button。
正如@better_use_mkstemp 提到的，在这个用例中，我认为您的<input> 不需要autoplay 属性（尤其是因为您不希望它无论如何都可以在iOS 设备上播放）。

更新的 HTML：

<body onload="load();">
 <video id="vid" src="http://awp.diaart.org/ali/test/movies/testmovie.mov" width="640" height="480" autoplay></video>
  <br>  
  <input type="button" value="Play" onclick="document.getElementById('vid').play();"> 
</body>

【讨论】：

除此之外，如果您确实希望有时使用播放按钮，请删除autoplay。您还可以为按钮设置一个 id 并执行以下操作：document.getElementById('playButton').style.visibility='hidden';。还有一个简单的方法来检查 p 的值，做一个alert(p) 让它弹出。
@better_use_mkstemp 确实，我想知道是否需要自动播放。将与有关 p 变量的更多信息一起合并到编辑中。
@Zenith $(document).ready(); 不再需要：answers.oreilly.com/topic/…
@JodyHeavener 好吧，我可以理解这篇文章，我也几乎不必使用 $(document).ready() ，我想人们有他们的喜好。但是，那篇文章提到了“如果你想要这个功能..”，但是这里的OP代码是松散的代码，与任何功能无关。
@Zenith - 你把我带到了山顶。你配得上你的把柄。非常感谢你从那座山上降下来。

【解决方案2】：

尝试去掉 if (p =='iPad') 声明，然后看看它是否隐藏它。如果是这样，则意味着它将平台作为 iOS 设备进行读取。

【讨论】：