问题
Is it possible to replace javascript w/ HTML if JavaScript is not enabled on the user's browser?
I know I can use <noscript>this displays in place of javascript</noscript>
That works fine, but it still runs the javascript.
In theory I would want this:
if javascript is enabled
run javascript
if javascript is not enabled
don't run javascript and give alternative method
I am using this jQuery plugin: http://malsup.com/jquery/cycle/int2.html
When I disable javascript on safari, it displays all three of the items, all within a div. The plugin fades in each item, but with it disabled it displays all three in a row, without fading in and out like it does w/ javascript enabled.
With javascript disabled, I would want to stop it from displaying all three items at the same time. I'll show you what it is suppose to look like and what it does when JavaScript is disabled.
Disabled view: http://i42.tinypic.com/212y1j6.png (notice them 3 stacked on top of eachother) - I want to stop that from happening since the JavaScript is disabled
Enabled view: http://i39.tinypic.com/9gwu3d.png
Here is the code for the div the items are in:
$(document).ready(function() {
$('#featured-programs-left').cycle({
fx: 'fade',
speed: 'slow',
timeout: 15000,
next: '#next2',
prev: '#prev2'
});
});
<div id="featured-programs-left">
<div>
<a href="http://site.com/academics/majors/emergency_medical_technician_-_paramedic/" title="Emergency Medical Technician - Paramedic"><img src="http://site.com/images/uploads/images/emt.jpg" alt="Emergency Medical Technician - Paramedic" /></a>
<strong>Emergency Medical Technician - Paramedic</strong>
<p>This unique A.A.S. degree program, a partnership between College and Faxton-St. Luke’s Healthcare provides the paramedic student the education necessary to function in an</p>
<p><a href="http://site.com/academics/majors/emergency_medical_technician_-_paramedic/" title="Learn more about Emergency Medical Technician - Paramedic">Learn more</a></p>
</div>
<div>
<a href="http://site.com/academics/majors/travel_tourism_hospitality_events_management/" title="Travel & Tourism: Hospitality & Events Management"><img src="http://site.com/images/uploads/images/hospitality_event_planning.jpg" alt="Travel & Tourism: Hospitality & Events Management" /></a>
<strong>Travel & Tourism: Hospitality & Events Management</strong>
<p>This program prepares students for exciting careers in the travel and tourism industry and the hospitality and events planning field. Graduates are prepared to:<br</p>
<p><a href="http://site.com/academics/majors/travel_tourism_hospitality_events_management/" title="Learn more about Travel & Tourism: Hospitality & Events Management">Learn more</a></p>
</div>
<div>
<a href="http://site.com/academics/majors/fashion_buying_merchandising/" title="Fashion Buying & Merchandising"><img src="http://site.com/images/uploads/images/fashion_merchandising.jpg" alt="Fashion Buying & Merchandising" /></a>
<strong>Fashion Buying & Merchandising</strong>
<p>This program prepares graduates for careers throughout the Fashion Industry including positions in buying, fashion merchandising, retail and wholesale sales, retail</p>
<p><a href="http://site.com/academics/majors/fashion_buying_merchandising/" title="Learn more about Fashion Buying & Merchandising">Learn more</a></p>
</div>
</div>
CSS for the div's
#featured-programs-left img,
#featured-programs-right img{
xfloat:left;
overflow:auto;
xclear:left;
xwidth:351px;
xpadding:0 5px 5px 0;
border:0;
}
#featured-programs-left,
#featured-programs-right {
height:625px;
float:left;
overflow:auto;
clear:left;
clear:right;
width:100%;
xborder:2px solid red;
}
#featured-programs-left div,
#featured-programs-right div {
xborder:1px solid purple;
overflow:auto;
clear:left;
clear:right;
width:352px;
height:345px;
}
#featured-programs-left {
float:left;
}
回答1:
Somewhat like Ates's solution, you can use Javascript to change the content for the users who have it enabled. For example, let's say you have a fancy menu that gives Javascript users super-easy navigation, but is worthless to non-JS users. In the HTML set the display property to 'none' and then use JS to enable it. In your case, where you have content you don't want to show for the non-JS users, you can just hide it by default. The downside is if the browser has JS AND CSS turned off, this won't work. If you're worried about that, you could use JS to insert the content.
<html>
<head>
<script>
$(document).ready(function() {
$('.jsok').show();
});
</script>
<style>
.jsok { display: none; }
</style>
</head>
<body>
<div class="jsok"><!-- content for JS users here--></div>
<div><!-- content for everyone here --></div>
<noscript><!-- content for non-js users here --></noscript>
</body>
</html>
回答2:
An alternative to using <noscript> is to hide a certain element with JavaScript as soon as the page loads. If JavaScript is disabled, the element will remain as being displayed. If JavaScript is enabled, your script will be executed and the element will be hidden.
window.onload = function () {
document.getElementById("no_script").style.display = "none";
}
<div id="no_script">
You don't have JavaScript enabled.
</div>
Update
If you want to do the opposite (show a bit of HTML when JavaScript is enabled), you can always inject new elements into the DOM tree using various methods. Here's one:
$(document).ready(function() {
$('#container').html($('#content').html());
});
<div id="container"></div>
<script type="text/html" id="content">
<div>Your <em>HTML</em> goes here</div>
</script>
Kudos to John Resig for the <script type="text/html"> trick for unobtrusively hiding HTML templates inside HTML. Browsers apparently don't execute or render <script> content of an unconventional type.
回答3:
It will run scripts if scripts are enabled. If you want to stage the <noscript> behavior, disable JavaScript in your browser and try it out.
来源：https://stackoverflow.com/questions/488492/noscript-tag-i-need-to-present-alternative-html-if-not-enabled