javascript - noscript tag, I need to present alternative html if not enabled - Stack Overflow

admin管理员组

文章数量:1289529

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: .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: .png (notice them 3 stacked on top of eachother) - I want to stop that from happening since the JavaScript is disabled

Enabled view: .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="/" title="Emergency Medical Technician - Paramedic"><img src=".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&#8217;s Healthcare provides the paramedic student the education necessary to function in an</p> 
    <p><a href="/" title="Learn more about Emergency Medical Technician - Paramedic">Learn more</a></p>
</div>

<div>
    <a href="/" title="Travel &amp; Tourism: Hospitality &amp; Events Management"><img src=".jpg" alt="Travel &amp; Tourism: Hospitality &amp; Events Management" /></a>
    <strong>Travel &amp; Tourism: Hospitality &amp; 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="/" title="Learn more about Travel &amp; Tourism: Hospitality &amp; Events Management">Learn more</a></p>
</div>

<div>
    <a href="/" title="Fashion Buying &amp; Merchandising"><img src=".jpg" alt="Fashion Buying &amp; Merchandising" /></a>
    <strong>Fashion Buying &amp; 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="/" title="Learn more about Fashion Buying &amp; 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;
}

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./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./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./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./academics/majors/emergency_medical_technician_-_paramedic/" title="Emergency Medical Technician - Paramedic"><img src="http://site./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&#8217;s Healthcare provides the paramedic student the education necessary to function in an</p> 
    <p><a href="http://site./academics/majors/emergency_medical_technician_-_paramedic/" title="Learn more about Emergency Medical Technician - Paramedic">Learn more</a></p>
</div>

<div>
    <a href="http://site./academics/majors/travel_tourism_hospitality_events_management/" title="Travel &amp; Tourism: Hospitality &amp; Events Management"><img src="http://site./images/uploads/images/hospitality_event_planning.jpg" alt="Travel &amp; Tourism: Hospitality &amp; Events Management" /></a>
    <strong>Travel &amp; Tourism: Hospitality &amp; 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./academics/majors/travel_tourism_hospitality_events_management/" title="Learn more about Travel &amp; Tourism: Hospitality &amp; Events Management">Learn more</a></p>
</div>

<div>
    <a href="http://site./academics/majors/fashion_buying_merchandising/" title="Fashion Buying &amp; Merchandising"><img src="http://site./images/uploads/images/fashion_merchandising.jpg" alt="Fashion Buying &amp; Merchandising" /></a>
    <strong>Fashion Buying &amp; 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./academics/majors/fashion_buying_merchandising/" title="Learn more about Fashion Buying &amp; 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;
}

• javascript
• html
• detect

Share Improve this question Follow edited Jan 28, 2009 at 17:36 Brad asked Jan 28, 2009 at 17:16 BradBrad 12.3k4545 gold badges124124 silver badges191191 bronze badges 1

• The question is not very clear. The title shows that you already know of the noscript tag, which seems like it would do what you need. If the noscript contents are displayed, the javascript is not also executed. Maybe some more specific details of what you're trying to achieve? – Chad Birch Commented Jan 28, 2009 at 17:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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>

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.

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.

本文标签： javascriptnoscript tagI need to present alternative html if not enabledStack Overflow