How does Apple change site based on whether Javascript is enabled?
I am working on a site that will involve a lot of Javascript to show/hide elements in accordions, as well as other things. I want to make sure that even people that do not have Javascript enabled will be able to access all of the site's content (even if it is a little less pretty/interactive). I am not sure the best way to go about doing this. I know you can use the tag, but I know that cannot be the best way. It doesn't make sense to have to essentially have two versions of the site, one for Javascript and one for not.
As I am still building the site, I thought using Apple's site would be a good example. On any of their produ开发者_如何学JAVAct pages (say http://www.apple.com/ipod/) they have their products at the top and then other options (Applications, iTunes & More, etc.) that when you click it shows these next elements. It looks awesome. But if you have Javascript enabled, you no longer get the cool interactive interface, but you do have all the products in a list. How would you go about doing this?
The solution doesn't necessarily have to be the way that Apple does it. I just thought it was a good example to illustrate what I am trying to do.
You'll need to Check if browser has javascript enabled. You can use the below function and onload it in your body tag. Based on whether the browser has js enabled or disabled, you can either redirect user to another page or do other things.
<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>
With js enabled, look at the HTML of the UL elements that contains all those Apple products:
<ul class="ul-slider" page="1" style="width: 840px; margin: 0pt 70px;">
The other UL is hidden until you click on it. The CSS of the child LI elements makes all of them flow left to right:
.productbrowser li {
display: inline;
float: left;
height: 150px;
margin-top: 4px;
width: 140px;
}
Now disable javascript and look at the same UL elements. Both are visible and there's no style attribute. So they're using progressive enhancement: only add features/effects if the browser supports it.
Start with the frame of mind that JS is disabled and write the HTML & CSS that way. That's the best way to make sure your site works with the LCD. Libraries like Modernizr and Head JS allow you to write CSS rules and conditional javascript based on what the browser and user settings are capable of displaying and the kind of javascript it can handle.
加载中,请稍侯......
精彩评论