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

【问题标题】：Hidden div is displayed briefly - how to prevent that to happen?隐藏的 div 短暂显示 - 如何防止这种情况发生？
【发布时间】：2016-09-02 09:05:25
【问题描述】：

我的页面上有 2 个 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>

这是 JavaScript 文件的内容：

$(document).ready(function () {
    $("#no-js").hide();
    $("#no-js").css('visibility','hidden');
    $("#no-js").css('display','none');
    $("#wrapper-page").css("display", "block");
});

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

【问题讨论】：

放置javascript代码 $("#no-js").hide();在最后一行并且没有 document.ready 并尝试一次..
@SandeepJPatel 不，不要工作。

标签： javascript jquery html css

【解决方案1】：

使用 noscript 标记仅在禁用 js 时显示的内容

<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>

【讨论】：

此解决方案将在 IE 11 中显示空白屏幕，这不是我想要的。
这很奇怪。在 body 标签内使用的标签 noscript 在所有浏览器中得到很好的支持，即使是旧浏览器。检查你的 CSS。
我会的。我会写新的空白页，我会禁用ie中的js，我会再次测试。
你是对的。我刚刚测试了该页面，并在 IE 11 中显示了该消息。我不确定旧版本，但似乎没有更好的方法。除了 noscript 之外，我唯一的其他选择是 css 转换。再次感谢。

【解决方案2】：

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

		$("#no-js").hide();
    $("#no-js").css('visibility','hidden');
    $("#no-js").css('display','none');
    $("#wrapper-page").css("display", "block");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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 -->

控制台中是否显示任何问题。

通过在源代码中验证来查看用于javascript文件的文件路径是否正确。

【讨论】：

这个内容显示得很好，因为它只有一行。在我的本地主机上，它也可以正常工作，但是当您尝试通过网络从另一台计算机访问它时，您会看到隐藏的 div 短暂显示。
这可能是由于您从中获取js文件的路径。在本地主机中，它会采用路径，但是当通过网络/IP 路径从其他计算机访问时，可能会出现问题。试着检查一下。

【解决方案3】：

我会使用 waldemarle 的回答中所述的noscript 标签，但这里有一个替代方案：

使用document.write，你可以在我的body内容周围放置一个容器div，用一个js类，然后你可以从头开始设置js的样式，而不用“闪烁”：

.js .no-js,
.js-show {display:none;}
.js .js-show {display:block;}

<script>
  document.write('<div class="js">'); // goes after start body tag
</script>

    <div class="no-js">hide if js enabled</div>
    <div class="js-show">hide if js disabled</div>

<script>
  document.write('</div>'); // goes before end body tag
</script>

【讨论】：

【解决方案4】：

试试这样的

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

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

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

noscript 标签从我记事起就一直存在。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript

【讨论】：

我试过了。 IE 11 不会在标记中显示任何内容。所以禁用 IE 11 和 js 的用户会看到空白屏幕。看到这个：stackoverflow.com/questions/15761148/…