Question

我正在开发一个网站，该网站将涉及大量的Javascript来显示/隐藏手风琴中的元素以及其他内容。我想确保即使没有启用Javascript的人也可以访问所有网站的内容（即使它不那么漂亮/互动）。我不确定这样做的最好方法。我知道你可以使用标签，但我知道这不是最好的方法。没有必要基本上有两个版本的网站，一个用于Javascript，一个用于非。

由于我仍在构建网站，我认为使用Apple的网站就是一个很好的例子。在他们的任何产品页面上（比如http://www.apple.com/ipod/），他们将产品放在顶部，然后是其他选项（应用程序，iTunes和更多等），当您单击它时会显示这些下一个元素。它看起来很棒。但是如果您启用了Javascript，则不再获得酷炫的交互式界面，但您确实拥有列表中的所有产品。你会怎么做呢？

解决方案不一定必须是Apple的方式。我只是觉得这是一个很好的例子来说明我想要做的事情。

Answer 1

您需要检查浏览器是否启用了javascript。您可以使用以下功能并将其加载到您的body标签中。根据浏览器是启用还是禁用js，您可以将用户重定向到其他页面或执行其他操作。

<body onload="checkJs()">
<div id="jsEnabled" style="visibility:hidden">JavaScript enabled</div>
<div id="jsDisabled">JavaScript disabled</div>

<script language="javascript" type="text/javascript">
function checkJs()
{
document.getElementById("jsEnabled").style.visibility = 'visible';
document.getElementById("jsDisabled").style.visibility = 'hidden';
}
</script>

Answer 2

启用js后，查看包含所有Apple产品的UL元素的HTML：

<ul class="ul-slider" page="1" style="width: 840px; margin: 0pt 70px;">

其他UL在您点击之前一直处于隐藏状态。子元素LI的CSS使它们全部从左向右流动：

.productbrowser li {
  display: inline;
  float: left;
  height: 150px;
  margin-top: 4px;
  width: 140px;
}

现在禁用javascript并查看相同的UL元素。两者都是可见的，并且没有样式属性。所以他们使用渐进增强：只有在浏览器支持的情况下才添加功能/效果。

从JS被禁用的心态开始，并编写HTML＆amp;那样的CSS。这是确保您的网站使用LCD的最佳方式。像Modernizr和Head JS这样的库允许你根据浏览器和用户设置能够显示的内容以及它可以处理的javascript类型来编写CSS规则和条件javascript。

Apple如何根据是否启用Javascript来更改网站？

2 个答案: