1

好的，所以我有一个包含一些文本的段落标签，文本是指用户可以查看导航的方向（我知道这是不必要的，但无论如何）。现在，我试图用 1 块石头杀死 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 实际上是一个块标记，不能在 p 或 span 等内的事实。

如何在保持新创建效率的同时验证这一点？

4

2 回答 2

1

这是一个肮脏的 hack，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>
于 2011-08-28T08:21:36.877 回答
1

You could drop the noscript tag and change the contents with JavaScript. Then by definition the original contents will be shown only when the user has JavaScript disabled.

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

(By the way, iPhone is not the only mobile device there is...)

于 2011-08-28T08:03:58.453 回答