禁用JavaScript时如何显示不同的内容？ [重复]

时间：2022-11-29 22:43:46

This question already has an answer here:

这个问题在这里已有答案:

I need to show COMPLETELY different content when JavaScript is disabled. I know I can use <noscript> tag... but how can I hide the rest of the page when JavaScript is disabled?

禁用JavaScript时,我需要显示完全不同的内容。我知道我可以使用

Thanks.

6 个解决方案

#1

20  

here is another solution:

这是另一个解决方案:

inside your head below your normal stylesheet have:

在正常样式表下方的头脑中有:

<link rel="stylesheet" href="jsdisabled.css" />
<script type="text/javascript">
    document.write('<link rel="stylesheet" href="jsenabled.css" />');
</script>

that jsenabled.css would have:

jsenabled.css会有:

#content { display:block; }

while jsdisabled.css would have:

而jsdisabled.css会有:

#content { display:none; }

although the solution below works it does not validate

虽然下面的解决方案有效,但它不会验证

inside your noscript tag you can put some style tag that hides the rest of your content

在您的noscript标记内,您可以放置​​一些隐藏其余内容的样式标记

ie:

<noscript>
    <style type="text/css">
        #content { display:none; }
    </style>
    no js content goes here.
</noscript>

<div id="content">
    content here.
</div>

I like using this method because it doesn't make the page flash when javascript is enabled.

我喜欢使用这种方法,因为它在启用javascript时不会使页面闪烁。

#2

8  

I would not use noscript to show alternate content. For one, only a limited number of tags are valid in a <noscript> tag, and <style> is not one of them. Instead, take a different approach. Have your content when javascript is disabled visible by default, and show alternate content when JavaScript is enabled. The best way to do this is with simple CSS and one line of JS. If you do it as I show here, there should not be an awkward flash of content:

我不会使用noscript来显示替代内容。例如,只有有限数量的标签在 

  <head>
     ...
     <script type="text/javascript"> document.documentElement.className += " js"</script>
     <link type="text/css" href="css/style.css" media="all" rel="stylesheet" />
  </head>
  <body>
     <div id="header" class="no_js">header</div>
     <div id="alt_header" class="js">header</div>

     .. etc ..
     <div id="super_duper" class="js">Whatever</div>
  </body>

Just apply js to everything that should show when JavaScript is enabled, and no_js to everything else. Then in your CSS put this:

只需将js应用于启用JavaScript时应显示的所有内容,并将no_js应用于其他所有内容。然后在你的CSS中把这个:

html.js .no_js, html .js { display: none }
html.js .js { display: block }

#3

4  

Use meta tags to redirect to a different page.

使用元标记重定向到其他页面。

<noscript> <meta http-equiv="refresh" content="2; URL=enable_javascript.php"> </noscript>

#4

2  

You could use Javascript to switch to a different page containing Javascript.

您可以使用Javascript切换到包含Javascript的其他页面。

For example:

<script type="text/javascript">
    location = "JSEnabled.html";
</script>

Non-javascript content goes here

#5

1  

All the above are fine, I believe. Just an alternative, you can try this,

以上所有都很好,我相信。只是一个替代方案,你可以尝试这个,

<head>
<script type="text/javascript">
//if javascript enabled
window.onload=function(){
 document.getElementById('jsContentWrapper').style.display='block';
}
</script>
</head>
<body>
<div id='jsContentWrapper' style='display:none;'>
 ---
 --
 -
</div>
<noscript>
   Place your javascript disabled content here
</noscript>
</body>

Thanks.

#6

0  

Setup a div tag with the id of content. Add the content you want displayed when javascript is disabled. Use jquery $("#content ").load("content.html") to load content if javascript is enabled.

使用内容id设置div标签。添加禁用javascript时要显示的内容。如果启用了javascript,则使用jquery $(“#content”)。load(“content.html”)加载内容。

#1

20  

here is another solution:

这是另一个解决方案:

inside your head below your normal stylesheet have:

在正常样式表下方的头脑中有:

<link rel="stylesheet" href="jsdisabled.css" />
<script type="text/javascript">
    document.write('<link rel="stylesheet" href="jsenabled.css" />');
</script>

that jsenabled.css would have:

jsenabled.css会有:

#content { display:block; }

while jsdisabled.css would have:

而jsdisabled.css会有:

#content { display:none; }

although the solution below works it does not validate

虽然下面的解决方案有效,但它不会验证

inside your noscript tag you can put some style tag that hides the rest of your content

在您的noscript标记内,您可以放置​​一些隐藏其余内容的样式标记

ie:

<noscript>
    <style type="text/css">
        #content { display:none; }
    </style>
    no js content goes here.
</noscript>

<div id="content">
    content here.
</div>

I like using this method because it doesn't make the page flash when javascript is enabled.

我喜欢使用这种方法,因为它在启用javascript时不会使页面闪烁。

#2

8  

I would not use noscript to show alternate content. For one, only a limited number of tags are valid in a <noscript> tag, and <style> is not one of them. Instead, take a different approach. Have your content when javascript is disabled visible by default, and show alternate content when JavaScript is enabled. The best way to do this is with simple CSS and one line of JS. If you do it as I show here, there should not be an awkward flash of content:

我不会使用noscript来显示替代内容。例如,只有有限数量的标签在 

  <head>
     ...
     <script type="text/javascript"> document.documentElement.className += " js"</script>
     <link type="text/css" href="css/style.css" media="all" rel="stylesheet" />
  </head>
  <body>
     <div id="header" class="no_js">header</div>
     <div id="alt_header" class="js">header</div>

     .. etc ..
     <div id="super_duper" class="js">Whatever</div>
  </body>

Just apply js to everything that should show when JavaScript is enabled, and no_js to everything else. Then in your CSS put this:

只需将js应用于启用JavaScript时应显示的所有内容,并将no_js应用于其他所有内容。然后在你的CSS中把这个:

html.js .no_js, html .js { display: none }
html.js .js { display: block }

#3

4  

Use meta tags to redirect to a different page.

使用元标记重定向到其他页面。

<noscript> <meta http-equiv="refresh" content="2; URL=enable_javascript.php"> </noscript>

#4

2  

You could use Javascript to switch to a different page containing Javascript.

您可以使用Javascript切换到包含Javascript的其他页面。

For example:

<script type="text/javascript">
    location = "JSEnabled.html";
</script>

Non-javascript content goes here

#5

1  

All the above are fine, I believe. Just an alternative, you can try this,

以上所有都很好,我相信。只是一个替代方案,你可以尝试这个,

<head>
<script type="text/javascript">
//if javascript enabled
window.onload=function(){
 document.getElementById('jsContentWrapper').style.display='block';
}
</script>
</head>
<body>
<div id='jsContentWrapper' style='display:none;'>
 ---
 --
 -
</div>
<noscript>
   Place your javascript disabled content here
</noscript>
</body>

Thanks.

#6

0  

Setup a div tag with the id of content. Add the content you want displayed when javascript is disabled. Use jquery $("#content ").load("content.html") to load content if javascript is enabled.

使用内容id设置div标签。添加禁用javascript时要显示的内容。如果启用了javascript,则使用jquery $(“#content”)。load(“content.html”)加载内容。

标签：

相关文章