Question

好的，所以我有一个带有一些文字的段落标签，文字指的是用户查看导航的方向（我知道这是不必要的，但无论如何）。现在，我试图通过javascript将这个值从基本上“左”改为“顶部”，用一块石头杀死2只鸟（导航通常在左侧，而在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实际上是一个块标签，不能在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不是唯一的移动设备......）

Answer 2

这是一个肮脏的黑客，Juhana的解决方案要好得多，但无论如何我都会提到它：

<script>
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = '.noscript{display:none;}';
    document.getElementsByTagName('head')[0].appendChild(style);
</script>
<p>
   look <span class="navdir">left<span class="noscript"> (or up, for mobile)</span></span>
   for the navigation section!
</p>

我该怎么处理？代码未经验证：Noscript可以弥补JS的不足，还可以为移动用户提供便利

2 个答案: