Javascript 隐藏的div会短暂显示-如何防止这种情况发生？_Javascript_Jquery_Html_Css

Javascript 隐藏的div会短暂显示-如何防止这种情况发生？

javascript jquery html css

Javascript 隐藏的div会短暂显示-如何防止这种情况发生？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的页面上有两个div，一个在禁用javascript时显示，另一个在未禁用javascript时显示我的问题是：即使没有禁用javascript，也会短暂显示包含禁用javascript消息的div，并且它在页面加载几秒钟后隐藏以下是我的html简化版： <html> <head> <body> <!-- This div is displayed only if the JavaScript is DISABLED --

我的页面上有两个div，一个在禁用javascript时显示，另一个在未禁用javascript时显示

我的问题是：即使没有禁用javascript，也会短暂显示包含禁用javascript消息的div，并且它在页面加载几秒钟后隐藏

以下是我的html简化版：

<html>
    <head>
    <body>
    <!-- This div is displayed only if the JavaScript is DISABLED -->       
    <div class="wrapper-page" id="no-js">
        <p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
        </p>
    </div>
    <!-- end no-js div -->
    <!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
    <div class="wrapper-page" id="wrapper-page" style="display:none;">
        <p>My regular content goes here...</p>
    </div>
    <!-- end wrapper page -->
    <script src="<?php echo base_url(); ?>backOffice/assets/js/jquery.min.js"></script>
    <!-- If JavaScrpt is disabled, then the main div remain not visible and only the div with the 
         Disabled JavaScript error message is displayed. -->
    <script src="<?php echo base_url(); ?>backOffice/assets/js/disabledjs.js"></script>
    </body>
</html>

我试图将JS和jQuery移到顶部，我试图切换html div的顺序，到目前为止，没有任何东西对我有帮助

仅当js被禁用时，才对显示的内容使用noscript标记

<html>
    <head>
    <body>
    <!-- This div is displayed only if the JavaScript is DISABLED -->
    <noscript>       
        <div class="wrapper-page">
            <p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
            </p>
        </div>
    </noscript>
    <!-- end no-js div -->
    <!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
    <div class="wrapper-page" id="wrapper-page" style="display:none;">
        <p>My regular content goes here...</p>
    </div>
    <!-- end wrapper page -->
    <script src="<?php echo base_url(); ?>backOffice/assets/js/jquery.min.js"></script>
    <!-- If JavaScrpt is disabled, then the main div remain not visible and only the div with the 
         Disabled JavaScript error message is displayed. -->
    <script src="<?php echo base_url(); ?>backOffice/assets/js/disabledjs.js"></script>
    </body>
</html>

我将使用waldemarle回答中所述的noscript标记，但这里有一个替代方法：

使用document.write，您可以使用一个js类在我的正文内容周围放置一个container div，然后您可以从一开始就为js设置样式，而不会闪烁：

.js.没有js， .js show{display:none；} .js.js show{display:block；} document.write；//在开始正文标记之后如果启用js，则隐藏禁用js时隐藏 document.write；//在结束体标记之前

您的代码运行良好。查看下面的代码

$no-js.hide； $no js.css'visibility'，'hidden'； $no js.css'display'，'none'； $wrapper-page.css显示，块；

已禁用JavaScript消息。。。。。

我的常规内容在这里

试试这样的

<div id="content">
  Javascript is enabled
</div>

<noscript>
  <div>
    Javascript is disabled
  </div>
</noscirpt>

<script>
   $("#content").show();
</script>

noscript标记在我记忆中就已经存在了

放置javascript代码$no-js.hide；在最后一行，没有文档。准备好，再试一次。@SandeepJPatel不，不工作。这个解决方案将在IE 11中显示空白屏幕，这不是我想要的。它很奇怪。在body标记中使用的标记noscript在所有浏览器中都得到了很好的支持，即使是旧浏览器。检查你的css，我会的。我会写新的空白页，我会在ie中禁用js，我会再次测试它。你是对的。我刚刚测试了这个页面，在IE11中显示了这个消息。我不确定旧版本的，但似乎没有更好的方法。除了noscript之外，我还有另外一个选择，那就是css转换。再次感谢。此内容显示得很好，因为它只是一行。在我的本地主机上，它也可以正常工作，但是当您尝试通过网络从另一台计算机访问它时，您将看到隐藏的div短暂显示。这可能是由于获取js文件的路径。在本地主机中，它将采用该路径，但当通过网络/ip路径从其他计算机访问时，可能会出现问题。试试看，我已经试过了。IE 11不显示和标签中的任何内容。因此，禁用IE11和js的用户将看到空白屏幕。见此：

<div id="content">
  Javascript is enabled
</div>

<noscript>
  <div>
    Javascript is disabled
  </div>
</noscirpt>

<script>
   $("#content").show();
</script>