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

Question

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

我希望代码检查用户是否在 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>

Run Code Online (Sandbox Code Playgroud)

基本上我只想显示这个播放按钮，只有当用户在 iOS 设备上时。

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

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

Answer 1

dsg*_*fin 5

jsFiddle 示例在这里。

首先，它应该被包裹在一个$(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();
  }
});

Run Code Online (Sandbox Code Playgroud)

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

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

但是，互联网上的其他来源似乎表明它确实会在相应的设备上返回“iPhone”、“iPad”等。由于我不拥有这些设备之一，因此我无法测试该理论。但如果它没有按照建议工作，还有其他记录在案的方法来检测 iPhone、iPad 和 iPod - 请参阅使用 jQuery 检测 iPad 用户？.

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

旁注：

你应该只有一个<body>，并且可以将两个单独<script>的合并为一个。
<!DOCTYPE html>和都不需要<html>。删除<html>.
<input>'s 应该用在<form>'s 中。
我还将输入的类型从更改submit为button。
正如@better_use_mkstemp所提到的，我看不到的，需要autoplay你的属性，<input>在这个用例（尤其是当你不希望它是在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>

Run Code Online (Sandbox Code Playgroud)

除此之外，如果您真的希望有时使用播放按钮，请删除“自动播放”。您还可以为按钮设置一个 id 并执行以下操作：`document.getElementById('playButton').style.visibility='hidden';`。还有一个简单的方法来检查 p 的值，做一个 `alert(p)` 让它弹出。 (2认同)
@JodyHeavener 好吧，我可以理解这篇文章，我几乎不必使用 $(document).ready() ，我想人们有自己的喜好。然而，那篇文章提到“如果你想要这个功能......”，但这里的 OP 代码是松散的代码，与任何功能无关。 (2认同)

归档时间：	12 年，4 月前
查看次数：	8610 次
最近记录：	12 年，4 月前