javascript - 我该如何处理？代码不验证 : Noscript to compensate for lack of JS, 但也适应移动用户

Question

好的，所以我有一个段落标记，其中包含一些文本，文本指的是用户可以查看导航的方向(我知道这是不必要的，但无论如何)。现在，我试图用 1 block 石头杀死 2 只鸟，方法是使用 javascript 将该值从本质上的“左”更改为“顶部”(导航通常在左侧，而在 iphone 上，例如在上方)；但是当我尝试使用 noscript 时，效率就体现出来了。

例子:

<script type="text/javascript">
  if(navigator.userAgent.indexOf('iPhone') > -1){
    document.getElementByClassName('navdir')[0].innerHTML = 'up';
  }
</script>

-------------

<p>
   look <span class="navdir">left<noscript><span> (or up, for mobile)</span></noscript></span>
   for the navigation section!
</p>

很酷的是，innerHTML 删除了 span.navdir 的子节点，这是 noscript 标签(及其内容)!我的句子对缺乏 javascript 的人以及使用 iphone 的人或两者都变得友好!

在我发现它没有通过验证之前，我一直很开心。我用谷歌搜索了一下，它是关于 noscript 实际上是一个 block 标记，不能在 p 或 span 等内部的事实。

我如何才能在保持新建立的效率的同时验证这一点？

Answer 1

您可以删除 noscript 标签并使用 JavaScript 更改内容。那么根据定义，只有当用户禁用 JavaScript 时，才会显示原始内容。

<script type="text/javascript">
  if(navigator.userAgent.indexOf('iPhone') > -1){
    document.getElementByClassName('navdir')[0].innerHTML = 'up';
  }
  else {
    document.getElementByClassName('navdir')[0].innerHTML = 'left';
  } 
</script>

-------------

<p>
   look <span class="navdir">left (or up, for mobile)</span>
   for the navigation section!
</p>

(顺便说一句，iPhone 不是唯一的移动设备...)