如何在Javascript不可用时显示内容,在javascript可用时隐藏它并且在任何一种情况下都不闪烁?
-
06-07-2019 - |
题
我有一个简单的发货选项表单,当有人从下拉列表中选择一个新选项时,我使用javascript自动提交表单。
为了支持没有javascript的浏览器,还有一个提交表单的按钮。使用javascript隐藏此按钮。
但是,这意味着我的按钮在短时间内可见,并且可能会导致闪烁,因为其余内容会重新格式化。
任何人都可以建议一种创建按钮的方法,使其开始隐藏,但只有在javascript不可用时才可见吗?例如,从display:none开始;并神奇地改为显示:block;当且仅当没有javascript。
解决方案
只需在<noscript> ... </noscript>
标签内放置任何内容,然后只有在未启用/可用JavaScript时才会显示。
其他提示
这取决于你如何隐藏它,你准备好使用DOM还是准备好窗口? Window ready等待所有图像下载,这通常太长了。
出于可访问性,原因,我将它隐藏在加载的DOM上。但是为了确保它不会出现,你可以把它放在一个noscript元素中
<noscript>
<input type="submit" />
</noscript>
至于你的最后一段,在没有JavaScript的情况下,不会发生这样的事情。
只需写下不引人注目的javascript: http://icant.co .UK /用品/七规则的,不显眼的JavaScript / 。
您所做的是将您的页面编写为普通页面,但是,然后使用底部的代码启动javascript,并开始编辑页面以使其更具交互性。这样做的好处是,如果他们关闭了javascript页面是正常的,但是,如果他们打开了,那么你可以优雅地添加更多功能。
我不是该选项的忠实粉丝,因为这可能意味着需要下载许多不需要的额外代码。
在此页面上查看评论5,以获得能够在实际显示任何内容之前进行更改的良好解决方案: http://dean.edwards.name/weblog/2006/06/again/
您可以在提交按钮之前和之后使用脚本来编写隐藏的div元素开始和结束标记。
一个选项是从显示的按钮开始,然后从JavaScript修改其CSS:
<head>
...
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
<script>
document.styleSheets[0].addRule(".hideMe", "display:none");
</script>
...
</head>
修改样式表而不是按钮(并将此代码放在onload的之外)可确保在绘制按钮之前隐藏它。