如果用户在iOS设备上，请隐藏HTML元素？ [英] Hide HTML element if user is on an iOS device?

查看：136
本文介绍了如果用户在iOS设备上，请隐藏HTML元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



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

 <！DOCTYPE html> 
< html> 
< head> 
< script type =text / javascriptsrc =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（'ends'，function（）{
 / * alert（'video ended'）; * / 
 / * vid.load（）; * / 
 }，假）; 
} 
< / script> 
 
< title> NEW ENTRY TEST< / title> 
< / head> 
 
< body> 
 
< body onload =load（）;> 
 
< video id =vidsrc =http://awp.diaart.org/ali/test/movies/testmovie.movwidth =640height =480autoplay> ;< /视频> 
< br> 
< input type =submitvalue =Playonclick =document.getElementById（'vid'）。play（）;> 
 
< / body> 
 
< / body> 
 
< / html>

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

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



很想听到有人对此有何看法。

解决方案

这里的jsFiddle示例。



首先，它应该包含在<$ c $中c> $（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 - 所有这些都不符合您的检查案例。



但，互联网上的其他来源 似乎建议 它确实会返回iPhone，iPad等各自的设备。由于我没有这些设备中的一个，我无法测试该理论。但如果它不能按照建议工作，还有其他记录的方法来检测iPhone，iPad和iPod - 请参阅 使用jQuery检测iPad用户？ 。



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





附注：


  1. 您应该只有一个< body> ，并且可以合并两个单独的 < script> 分为一个。

  2. 您不需要<！DOCTYPE html> 和< html> 。删除< html> 。

  3. < input> 应该在< form> 的。

  4. 我还将输入的类型从提交更改为按钮。

  5. 提到 @better_use_mkstemp ，我认为不需要 autoplay < input> 的c $ c>属性（特别是因为你不希望它在iOS设备上可以播放）。





更新的HTML：

 < body onload =load（）;> 
< video id =vidsrc =http://awp.diaart.org/ali/test/movies/testmovie.movwidth =640height =480autoplay>< /视频> 
< br> 
< input type =buttonvalue =Playonclick =document.getElementById（'vid'）。play（）;> 
< / body>


I want the code to check if a user is on an iOS device, and then, if they are not, hide the HTML input type "Play" button.

So, in my code, I'm sure if my iOS checking is wrong, of the code to hide the "Play" button, or both:

<!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>

Basically I just want this play button to display, only if the user is on an iOS device.

I know it's not working because the play button still displays on a regular (non-iOS) computer.

Curious to hear anyone's thoughts on this.

解决方案

jsFiddle example here.

Firstly, it should be wrapped inside a $(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();
  }
});

Now, the only potential problem you have left is your check case case using navigator.platform.

According to the specification, navigator.platform returns one of the following values: "Win32", "Linux i686", "MacPPC", "MacIntel" - none of which match your check case.

However, other sources on the internet seem to suggest that it does indeed return "iPhone", "iPad" etc. on the respective devices. As I don't own one of these devices, I can't test that theory out. But if it doesn't work as suggested, there are other documented ways to detect the iPhone, iPad and iPod - see Detect iPad users using jQuery?.

Once you've tested a solution that detects all three iOS products, store it in your p variable and your code should function as you wish.

Side Notes:

  1. You should only have one <body>, and can merge the two seperate <script>'s into one.
  2. You don't need both <!DOCTYPE html> and <html>. Remove the <html>.
  3. <input>'s are supposed to be used in <form>'s.
  4. I've also changed the type of the input from submit to button.
  5. As @better_use_mkstemp mentioned, I don't see the need for the autoplay attribute on your <input> in this use-case (especially as you don't want it to be playable on iOS devices anyway).

Updated 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>

这篇关于如果用户在iOS设备上，请隐藏HTML元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆