gpt4 book ai didi

javascript - 基于 Javascript 可用性制作行为 CSS 触发器的安全方法

转载 作者:行者123 更新时间:2023-11-27 22:52:10 26 4
gpt4 key购买 nike

我一直在使用这段代码以编程方式检查 Javascript 是否可用并使用不同的行为 CSS。

如果 Javascript 被禁用,它只会显示一个普通的无序列表。

如果启用了 javascript,列表将在页面加载后转换,然后显示给用户(避免在转换之前/期间可能重绘/闪烁无序列表元素)。

document.getElementsByTagName('body') 是否有可能在页面呈现的这个阶段实际上返回一个空数组,还是它始终可用?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<style type="text/css">
.javascript ul { display:none; }
.no_javascript ul { display:block; }
.transformed { background-color: yellow; }
</style>
</head>
<body class="no_javascript">

<script type="text/javascript">
// Inform us that javascript is available
(function() {
var body = document.getElementsByTagName('body');
if ( body && body[0] ) {
body[0].className = body[0].className.replace(/no_javascript/, "javascript");
}
})();
</script>

<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$(".javascript ul").addClass("transformed").css('display','block');
});

</script>
</body>
</html>

更新:How to eliminate post-render "flicker"?似乎是我的问题的重复。这是我试图妥善解决的问题。

最佳答案

据我所知,在 HTML 中,脚本是按顺序解析的(除非它们具有 defer 属性,但那是另一回事了)。

如果你看SCRIPT section in HTML4.01 specs ,你可以看到:

Scripts may be evaluated as a document loads to modify the contents of the document dynamically.

还有:

All SCRIPT elements are evaluated in order as the document is loaded.

还有一个示例说明以下脚本将如何影响生成的标记:

 <TITLE>Test Document</TITLE>
<SCRIPT type="text/javascript">
document.write("<p><b>Hello World!<\/b>")
</SCRIPT>

与此 HTML 标记具有相同的效果:

 <TITLE>Test Document</TITLE>
<P><B>Hello World!</B></P>

由于您的脚本包含在 BODY 之后并且没有 DEFER 属性,因此可以安全地假设在脚本执行期间,BODY 标记已经被解析并且 BODY 元素已经被创建(但不是其余的树的元素,例如从有问题的脚本后面的标记创建的元素!)。

当然,你真的应该使用更快、更兼容和更短的 document.body 而不是 document.getElementsByTagName('body')[0 ] :)

事实上,我会替换整个 block :

(function() {
var body = document.getElementsByTagName('body');
if ( body && body[0] ) {
body[0].className = body[0].className.replace(/no_javascript/, "javascript");
}
})();

用类似的东西:

document.body.className = document.body.className.replace('no_javascript', 'javascript');

关于javascript - 基于 Javascript 可用性制作行为 CSS 触发器的安全方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1466805/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com