是否有与<noscript>相反的HTML?

HTML中是否有标签,只有在启用JavaScript的情况下才会显示其内容? 我知道<noscript>工作方式相反,JavaScriptclosures时显示HTML内容。 但是,如果JavaScript可用,我只想在网站上显示一个表单,告诉他们为什么他们不能使用表单,如果他们没有。

我知道如何做到这一点的唯一方法是与document.write(); 方法在脚本标记中,而对于大量的HTML来说似乎有点麻烦。

当页面加载时,您可能会看到一个隐藏的div,通过JavaScript显示。

我能想到的最简单的方法是:

 <html> <head> <noscript><style> .jsonly { display: none } </style></noscript> </head> <body> <p class="jsonly">You are a JavaScript User!</p> </body> </html> 

没有document.write,没有脚本,纯CSS。

首先,总是将内容,标记和行为分开!

现在,如果你正在使用jQuery库(你真的应该这样做,它使得JavaScript变得更容易),下面的代码应该这样做:

 $(document).ready(function() { $("body").addClass("js"); }); 

当JS启用时,这会给你一个额外的类。 现在,在CSS中,当JS类不可用时,可以隐藏该区域,并在JS可用时显示该区域。

或者,您可以添加no-js作为您的身体标记的默认类,并使用此代码:

 $(document).ready(function() { $("body").removeClass("no-js"); $("body").addClass("js"); }); 

请记住,如果CSS被禁用,它仍然显示。

我并不完全同意所有关于事先embeddedHTML的方法,并用CSS隐藏它,直到它再次用JS显示。 即使不启用JavaScript,该节点仍然存在于DOM中。 诚然,大多数浏览器(即使是辅助function的浏览器)都会忽略它,但它仍然存在,可能有些奇怪的时候会回来咬你。

我首选的方法是使用jQuery来生成内容。 如果会有很多的内容,那么你可以把它保存为一个HTML片段(只是你想要显示的HTML,而不是html,body,head等标签),然后使用jQuery的ajax函数来加载它整个页面。

的test.html

 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $.get('_test.html', function(html) { $('p:first').after(html); }); }); </script> </head> <body> <p>This is content at the top of the page.</p> <p>This is content at the bottom of the page.</p> </body> </html> 

_test.html

 <p>This is from an HTML fragment document</p> 

结果

 <p>This is content at the top of the page.</p> <p>This is from an HTML fragment document</p> <p>This is content at the bottom of the page.</p> 

我有一个简单而灵活的解决scheme,有点类似于威尔的(但有效的HTML的额外好处):

给body元素一个“jsOff”类。 用JavaScript删除(或replace)。 让CSS用一个“jsOff”类的父元素隐藏任何带有“jsOnly”类的元素。

这意味着如果启用JavaScript,则“jsOff”类将从主体中删除。 这将意味着具有“jsOnly”类的元素不会有一个具有“jsOff”类的父类,因此不会匹配隐藏它们的CSSselect器,因此将显示它们。

如果JavaScript被禁用,则“jsOff”类将不会从正文中删除。 具有“jsOnly”的元素有一个“jsOff”的父母,因此匹配隐藏他们的CSSselect器,因此他们将被隐藏。

代码如下:

 <html> <head> <!-- put this in a separate stylesheet --> <style type="text/css"> .jsOff .jsOnly{ display:none; } </style> </head> <body class="jsOff"> <script type="text/javascript"> document.body.className = document.body.className.replace('jsOff','jsOn'); </script> <noscript><p>Please enable JavaScript and then refresh the page.</p></noscript> <p class="jsOnly">I am only shown if JS is enabled</p> </body> </html> 

这是有效的HTML。 很简单。 它很灵活。

只需将“jsOnly”类添加到任何您希望仅在启用JS时才显示的元素。

请注意,删除“jsOff”类的JavaScript应该在body标签内尽早执行。 它不能被执行得更早,因为身体标记不会在那里。 它不应该稍后执行,因为这意味着具有“jsOnly”类的元素可能不会立即可见(因为它们将匹配隐藏它们的CSSselect器,直到从body元素中删除“jsOff”类)。

这也可以提供仅用于js风格的机制(例如.jsOn .someClass{} )和非js风格(例如.jsOff .someOtherClass{} )。 您可以使用它来提供<noscript>的替代方法:

 .jsOn .noJsOnly{ display:none; } 

您也可以使用Javascript从另一个源文件加载内容并输出。 这可能是一个更黑色的盒子,比你要找的。

我的解决scheme

的CSS:

 .js { display: none; } 

.js文件:

 $(document).ready(function() { $(".js").css('display', 'inline'); $(".no-js").css('display', 'none'); }); 

html的:

 <span class="js">Javascript is enabled</span> <span class="no-js">Javascript is disabled</span> 

亚历克斯的文章想到这里,但是它只适用于如果您使用的ASP.NET – 它可以在JavaScript模拟,但是,你必须再次使用document.write();

您可以将段落的可见性设置为“隐藏”。

然后在'onload'函数中,可以将可见性设置为'visible'。

就像是:

<body onload =“javascript:document.getElementById(rec).style.visibility = visible”> <p style =“visibility:visible”id =“rec”>这段文字被隐藏,除非javascript可用。</ p>

这没有标签。 您将需要使用JavaScript来显示文本。

有些人已经build议使用JSdynamic设置CSS可见。 您也可以使用document.getElementById(id).innerHTML = "My Content"或dynamic创build节点来dynamic生成文本,但CSS hack可能是最直接的读取。

下面是一个隐藏div的例子:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *[data-when-js-is-on] { display: none; } </style> <script> document.getElementsByTagName("style")[0].textContent = ""; </script> </head> <body> <div data-when-js-is-on> JS is on. </div> </body> </html> 

(你可能需要调整它的穷IE,但你明白了。)