简体   繁体   English

<noscript>标签不起作用

[英]<noscript> tag not working

I've used the <noscript> tag to hide certain elements when javascript is not enabled;我使用<noscript>标记在未启用 javascript 时隐藏某些元素; however, it doesn't seem to work.但是,它似乎不起作用。

My document declaration:我的文件声明:

<!DOCTYPE html>

At the end of my file I typed the following:在我的文件末尾,我输入了以下内容:

<noscript>
 <style type="text/css" scoped> #status {display:none;} </style> 
</noscript>

</body>
</html>

But the #status div is still present even after disabling JS.但是即使在禁用 JS 之后,#status div 仍然存在。 Am I missing something here?我在这里错过了什么吗?

Remove the scoped attribute of the style tag.移除style标签的scoped属性。 It's making your CSS apply strictly to the <noscript> tag.它使您的 CSS 严格应用于<noscript>标签。

If this attribute is present, then style applies only to its parent element.如果此属性存在,则样式仅适用于其父元素。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#Attributes https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#Attributes

A simpler to manage solution would be to make the element hidden by default and use this :一个更简单的管理解决方案是默认隐藏元素并使用它:

<script>document.getElementById('status').style.display='block';</script>

(or an equivalent class based solution) (或等效的基于类的解决方案)

Try removing the scope of the style , like the code below.尝试删除stylescope ,如下面的代码。

       <noscript>
           <style type="text/css"> #status {display:none;} </style> 
       </noscript>

@dystroy's answer is the right way of doing it, because: @dystroy 的回答是正确的做法,因为:

  • <style> elements can't be placed on <body> (except if they have scoped attribute) <style>元素不能放在<body> (除非它们有scoped属性)
  • <noscript> elements can't be placed on head. <noscript>元素不能放在头上。

But if you don't want a delay, you can use the following in <head> :但是如果你不想延迟,你可以在<head>使用以下内容:

<style id="noScriptSheet" type="text/css">
.onlyScript{ display:none;}
</style>

<script type="text/javascript">
function kill(el){
    return el.parentNode.removeChild(el);
}
kill(document.getElementById('noScriptSheet'));
</script>

And add a class to your element:并向您的元素添加一个类:

<div class="onlyScript">Hello world!</div>

Demo : http://jsfiddle.net/TQLfu/演示http : //jsfiddle.net/TQLfu/

I am adding this answer because this seems to be the most popular SO-question regarding the noscript tag.我添加这个答案是因为这似乎是关于noscript标签的最流行的 SO 问题。

It doesn't seem to fire at all with "Sybu JavaScript Blocker" .它似乎根本不会被"Sybu JavaScript Blocker" 触发 So in case you are testing with that JavaScript blocker try using another JavaScript blocker .因此,如果您正在使用该 JavaScript 阻止程序进行测试,请尝试使用另一个 JavaScript 阻止程序 When I used "Toggle Javascript" the noscript tag fired without problem.当我使用“Toggle Javascript”时, noscript标签毫无问题地被触发。 I did not yet discover a way to detect that "Sybu JavaScript Blocker" is being used.我还没有发现一种方法来检测正在使用“Sybu JavaScript Blocker”。


My Testing environment:我的测试环境:

  • Sybu JavaScript Blocker, Version 2.93 Sybu JavaScript 拦截器,版本 2.93
  • Toggle JavaScript, Version 1.3切换 JavaScript,版本 1.3
  • Chrome, Version 85.0.4183.83 Chrome,版本 85.0.4183.83

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM