Dan*_*aab 16 html javascript ajax jquery dom
我已经尽力使用Javascript/Ajax技术成为纯粹主义者,确保所有Ajax-y行为都是基本功能的增强,而当Javascript被禁用时,该站点也完全正常运行.但是,这会导致一些问题.
在某些情况下,只有在浏览器中启用Javascript时,才能看到DOM节点.在其他情况下,它应该仅在禁用时可见.以表格上的提交按钮为例,该表单具有自动提交的onchange处理程序(使用JQuery的表单插件):
<form method="post" action=".">
<label for="id_state">State:</label>
<select name="state" id="id_state" onchange="$(this.form).ajaxSubmit(ajax_submit_handler);">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>
<input class="with_js_disabled" type="submit" value="OK" />
</form>
和Javascript:
<script type="text/javascript">
$(document).ready(function()
{
$(".with_js_disabled").hide();
});
</script>
启用Javascript时,不需要提交按钮(由于onchange处理程序).但是,JQuery的$(document).ready函数(以及更直接的document.onload)仅在页面完全加载和呈现后调用 - 因此,最初显示提交按钮,当Javascript为时,会出现"flash"执行并且节点的显示设置为"none".
我接受这是做生意的成本,并没有找到解决办法.但是有一种我不知道的技术可以最大限度地减少效果,甚至可以直接消除它吗？
编辑:
<noscript>下面很多人提到的解决方案似乎很有希望,但在Safari上并不适合我.然而Prestaul的第二个建议很有效:
<body>
<script type="text/javascript">
document.body.className += ' has_js';
</script>
<!-- the rest of your page -->
</body>
然后可以使用直接CSS设置样式:
body .js_enabled_only { display: none; }
body .js_disabled_only { display: block; }
body.has_js .js_enabled_only { display: block; }
body.has_js .js_disabled_only { display: none; }
第二行仅供参考,可以(并且应该)删除,以避免不应显示元素的情况:块.同样,对于其他显示样式,您可能需要在第三行上使用不同的变体.但是这个解决方案很干净,IMO,在我的测试中完全消除了闪烁效应.
Pre*_*aul 10
如何组合这些解决方案:
<style type="text/javascript">
.only-without-script {
display: none;
}
</style>
<noscript>
<style type="text/javascript">
.only-with-script {
display: none;
}
.only-without-script {
display: block;
}
</style>
</noscript>
或者我更喜欢在正文中添加一个类(将<script>标记放在正文的顶部而不使用.ready事件):
<head>
<style type="text/javascript">
body.has-script .something-not-ajaxy {
display: none;
}
input.ajaxy-submit {
display: none;
}
body.has-script input.ajaxy-submit {
display: inline;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.className += ' has-script';
</script>
<!-- the rest of your page -->
</body>
对于与您的情况相同的情况,我通常会在<noscript>标签周围放置提交按钮.没有人建议它,所以我不确定这些部分是否被认为是不好的做法,但它是我使用的,它对我有用.
如果您只想在启用Javascript时显示节点,则可以在头部执行:
<noscript>
<style type="text/css">
.js-enabled { display: none; }
</style>
</noscript>
然后给任何只有Javascript的元素一类js-enabled.