Mik*_*keJ 650 html javascript code-snippets
今天早上有一篇帖子询问有多少人禁用了JavaScript.然后我开始想知道可以使用哪些技术来确定用户是否禁用了它.
有没有人知道一些短/简单的方法来检测JavaScript是否被禁用？我的目的是发出警告,如果没有启用JS的浏览器,该站点将无法正常运行.
最终我想将它们重定向到能够在没有JS的情况下工作的内容,但我需要将此检测作为占位符来启动.
hai*_*rbo 354
我想在这里添加我的.02.它不是100%防弹,但我认为它足够好.
对于我来说,问题是,在没有Javascript的情况下,使用某种"此网站在没有Javascript的情况下工作得不好"的首选示例是您需要确保您的网站在没有Javascript的情况下正常工作.一旦你开始走这条路,那么你就会开始意识到网站应该是防弹的,关闭JS,这是一大堆额外的工作.
所以,你真正想要的是对一个页面的"重定向",即"打开JS,傻".但是,当然,你无法可靠地进行元重定向.所以,这是建议:
<noscript>
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
You don't have javascript enabled. Good luck with that.
</div>
</noscript>
... 您网站中的所有内容都包含在"pagecontainer"类的div中.然后,noscript标记内的CSS将隐藏您的所有页面内容,而是显示您想要显示的任何"无JS"消息.这实际上是Gmail似乎要做的......如果它对谷歌来说足够好,那对我的小网站来说已经足够了.
Mar*_*ear 280
我假设您正在尝试决定是否提供JavaScript增强的内容.最好的实现会干净利落地降低,因此该站点仍然可以在没有JavaScript的情况下运行.我还假设您的意思是服务器端检测,而不是<noscript>出于无法解释的原因使用该元素.
没有一种很好的方法来执行服务器端JavaScript检测.作为替代方案,可以使用JavaScript设置cookie,然后在后续页面查看时使用服务器端脚本测试该cookie.但是,这不适合决定要传送的内容,因为它无法区分没有cookie的访问者与新访问者或阻止cookie的访问者.
Con*_*oyP 197
noscript 禁用JavaScript时执行块,通常用于显示您在JavaScript中生成的替代内容,例如
<script type="javascript">
... construction of ajaxy-link, setting of "js-enabled" cookie flag, etc..
</script>
<noscript>
<a href="next_page.php?nojs=1">Next Page</a>
</noscript>
没有js的用户将获得next_page链接 - 你可以在这里添加参数,以便你在下一页上知道他们是通过JS /非JS链接,还是尝试通过JS设置一个cookie,缺少这意味着JS被禁用.这两个例子都是相当微不足道的,可以操纵,但你明白了.
如果你想要一个纯粹统计的想法,你有多少用户禁用了javascript,你可以这样做:
<noscript>
<img src="no_js.gif" alt="Javascript not enabled" />
</noscript>
然后检查您的访问日志以查看此图像被点击的次数.一个稍微粗略的解决方案,但它会为您的用户群提供百分比的好主意.
上述方法(图像跟踪)不适用于纯文本浏览器或完全不支持js的浏览器,因此如果您的用户群主要向该区域摆动,这可能不是最好的方法.
小智 46
这对我有用:如果禁用了javascript,它会重定向访问者
<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>
And*_*ges 44
如果您的用例是您有表单(例如,登录表单)并且您的服务器端脚本需要知道用户是否启用了JavaScript,您可以执行以下操作:
<form onsubmit="this.js_enabled.value=1;return true;">
<input type="hidden" name="js_enabled" value="0">
<input type="submit" value="go">
</form>
这将在提交表单之前将js_enabled的值更改为1.如果你的服务器端脚本得到0,没有JS.如果它得到1,JS!
cll*_*pse 42
我建议你通过编写不引人注目的JavaScript来反过来.
使用JavaScript禁用的用户可以使用您的项目功能,并在完成后实现JavaScript UI增强功能.
https://en.wikipedia.org/wiki/Unobtrusive_JavaScript
Abu*_*zzy 33
在body上使用.no-js类,并根据.no-js父类创建非javascript样式.如果javascript被禁用,你将获得所有非javascript样式,如果有JS支持,.no-js类将被替换为你提供所有样式.
document.body.className = document.body.className.replace("no-js","js");
HTML5样板中使用的技巧http://html5boilerplate.com/通过modernizr但您可以使用一行javascript来替换类
noscript标签没关系,但为什么在你的html中有额外的东西可以用css完成
de *_*aad 32
<noscript>甚至没有必要,更不用说XHTML不支持.
工作实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>My website</title>
<style>
#site {
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js "></script>
<script>
$(document).ready(function() {
$("#noJS").hide();
$("#site").show();
});
</script>
</head>
<body>
<div id="noJS">Please enable JavaScript...</div>
<div id="site">JavaScript dependent content here...</div>
</body>
</html>
在此示例中,如果启用了JavaScript,则会看到该站点.如果没有,那么您会看到"请启用JavaScript"消息.测试JavaScript是否已启用的最佳方法是简单地尝试使用JavaScript!如果它有效,它会启用,如果没有,那么它不是......
rsl*_*ite 13
您可以使用简单的JS代码段来设置隐藏字段的值.回发后,您知道JS是否已启用.
或者您可以尝试打开一个快速关闭的弹出窗口(但可能是可见的).
您还可以使用NOSCRIPT标记来显示禁用JS的浏览器的文本.
小智 13
你需要看一下noscript标签.
<script type="text/javascript">
...some javascript script to insert data...
</script>
<noscript>
<p>Access the <a href="http://someplace.com/data">data.</a></p>
</noscript>
bor*_*rel 13
只是有点难,但(发型给了我这个想法)
CSS:
.pagecontainer {
display: none;
}
JS:
function load() {
document.getElementById('noscriptmsg').style.display = "none";
document.getElementById('load').style.display = "block";
/* rest of js*/
}
HTML:
<body onload="load();">
<div class="pagecontainer" id="load">
Page loading....
</div>
<div id="noscriptmsg">
You don't have javascript enabled. Good luck with that.
</div>
</body>
无论如何都适合吗？即使noscript标签不受支持(只需要一些css),任何人都知道非css解决方案吗？
小智 12
noscript标签运行良好,但需要每个额外的页面请求继续提供无用的JS文件,因为本质上noscript是客户端检查.
您可以使用JS设置cookie,但正如其他人指出的那样,这可能会失败.理想情况下,您希望能够检测JS客户端,并且不使用cookie,为该用户设置会话服务器端,以指示JS已启用.
可能是使用JavaScript动态添加1x1图像,其中src属性实际上是服务器端脚本.所有这个脚本都会保存到当前启用了JS的用户会话($ _SESSION ['js_enabled']).然后,您可以将1x1空白图像输出回浏览器.对于已禁用JS的用户,该脚本不会运行,因此不会设置$ _SESSION ['js_enabled'].然后,对于提供给该用户的其他页面,您可以决定是否包含所有外部JS文件,但是您始终希望包含该检查,因为您的某些用户可能正在使用NoScript Firefox附加组件或具有JS由于其他原因暂时禁用.
您可能希望在靠近页面末尾的位置包含此检查,以便额外的HTTP请求不会减慢页面的呈现速度.
小智 12
将其添加到每个页面的HEAD标记中.
<noscript>
<meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>
所以你有了:
<head>
<noscript>
<meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>
</head>
谢谢Jay.
小智 11
因为我总是想给浏览器一些值得看的东西,我经常使用这个技巧:
首先,需要JavaScript才能正常运行的页面的任何部分(包括通过getElementById调用等进行修改的被动HTML元素)都可以原样使用,并假设没有可用的javaScript.(设计好像不在那里)
任何需要JavaScript的元素,我都放在一个标签内:
<span name="jsOnly" style="display: none;"></span>
然后在我的文档的开头,我使用.onload或document.ready在循环中getElementsByName('jsOnly')设置.style.display = "";转换JS依赖元素.这样,非JS浏览器就不必看到网站的JS依赖部分,如果它们拥有它,它会立即出现.
一旦习惯了这种方法,就可以很容易地混合你的代码来处理这两种情况,虽然我现在只是试验noscript标签并期望它有一些额外的优势.
一个常见的解决方案是将元标记与noscript结合使用以刷新页面并在禁用JavaScript时通知服务器,如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<noscript>
<meta http-equiv="refresh" content="0; /?javascript=false">
</noscript>
<meta charset="UTF-8"/>
<title></title>
</head>
</html>
在上面的示例中,当禁用JavaScript时,浏览器将在0秒内重定向到网站的主页.此外,它还会将参数javascript = false发送到服务器.
然后,服务器端脚本(如node.js或PHP)可以解析参数并了解JavaScript已禁用.然后,它可以向客户端发送特殊的非JavaScript版本的网站.
这是使用的"最干净"的解决方案:
<noscript>
<style>
body *{ /*hides all elements inside the body*/
display: none;
}
h1{ /* even if this h1 is inside head tags it will be first hidden, so we have to display it again after all body elements are hidden*/
display: block;
}
</style>
<h1>JavaScript is not enabled, please check your browser settings.</h1>
</noscript>
如果javascript被禁用,您的客户端代码将无法运行,因此我认为您的意思是您希望服务器端提供该信息.在这种情况下,noscript不太有用.相反,我有一个隐藏的输入并使用javascript来填充值.在您的下一个请求或回发后,如果值在那里您知道javascript已打开.
小心noscript之类的东西,第一个请求可能会显示禁用javascript,但未来的请求会启用它.
例如,您可以使用类似document.location ='java_page.html'的内容将浏览器重定向到新的带脚本的页面.无法重定向意味着JavaScript不可用,在这种情况下,您可以使用CGI ro utines或在标记之间插入适当的代码.(注意:NOSCRIPT仅适用于Netscape Navigator 3.0及更高版本.)
信用 http://www.intranetjournal.com/faqs/jsfaq/how12.html
| 归档时间： |
|
| 查看次数： |
432931 次 |
| 最近记录： |