Ali*_*sam 45 html javascript css noscript
通常,当加载页面并且浏览器禁用了Javascript时,我们使用<noscript>标记写出类似警告的内容并告诉客户端启用Javascript.然而,Facebook的,甚至后加载页面启用了JS,它禁止你得到通知的那一刻.我怎么能这样做？
更新:这个机制在Facebook上已经不再可用了,但是之前,我提出这个问题已经太迟了,但如果找到任何答案,我会非常感激.
我想在我的页面中有一个段,一直在检查Javascript是否被禁用,如果是,则显示内容<noscript>.
为实现这一目标,我创建了一个CheckJS.html页面.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0">
</head>
<body>
<noscript>
JS is disabled!
</noscript>
</body>
</html>
这个页面将继续刷新,当JS被禁用时,JS被禁用!会出现.
在我的原始页面中添加此页面.我尝试了以下方法:
1- .load()
我在里面使用了JQuery.然而,似乎只加载的内容的CheckJS.html.意味着元素及其内部的内容不会被加载到内部..load('CheckJS.html')div.load()<body><head>div
2- iframe
经过一番搜索,我发现,加载的唯一可能途径FULL HTML页面,包括<head>是使用<iframe>.
<iframe src="CheckJS.html"></iframe>
然而,<meta http-equiv="refresh" content="0">中CheckJS.html影响父页面,原来的页面本身开始让人耳目一新.
如果我们能够在<iframe>不强制原始页面刷新的情况下使用它,那么这可能是一个解决方案,但即使找到了这个解决方案,我觉得它更像是一个技巧而不是一个真正的解决方案.
UPDATE
安东尼的回答证明我iframe刷新原始页面是错误的,浏览器显示它的刷新,但实际上它不是,如果就是这样,那么可以避免使用JavascriptCheckJS.html,我提供的就是这个工作,甚至更好,<noscript>重新启用JS时将隐藏它.仍然这整个iframe方法不是那么用户友好(可以冻结浏览器),除非刷新每10秒左右发生一次,这不是即时检测.
Ant*_*ony 15
通过不断用JavaScript替换元素来停止CSS动画.禁用JavaScript后,CSS动画将启动并显示消息.
@keyframes 浏览器兼容性:Chrome,Firefox 5.0 +,IE 10 +,Opera 12 +,Safari 4.0+
<style>
.nojs_init {
position: relative;
animation:nojs-animation 0.2s step-end;
-moz-animation:nojs-animation 0.2s step-end; /* Firefox */
-webkit-animation:nojs-animation 0.2s step-end; /* Safari and Chrome */
-o-animation:nojs-animation 0.2s step-end; /* Opera */
}
@keyframes nojs-animation
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}
@-moz-keyframes nojs-animation /* Firefox */
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}
@-webkit-keyframes nojs-animation /* Safari and Chrome */
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}
@-o-keyframes nojs-animation /* Opera */
{
from {visibility:hidden;opacity:0;}
to {visibility:visible;opacity:1;}
}
</style>
<body>
<div id="content"></div>
<div id="nojs" class="nojs_init"><noscript>JavaScript is <span style="font-weight:bold;">disabled</span>.</noscript></div>
</body>
<script>
document.getElementById("content").innerHTML = 'JavaScript is <span style="font-weight:bold;">enabled</span>. Try disabling JavaScript now.';
var elm = document.getElementById("nojs"),
animation = false,
animationstring = 'animation',
keyframeprefix = '',
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
pfx = '';
if( elm.style.animationName ) { animation = true; }
if( animation === false ) {
for( var i = 0; i < domPrefixes.length; i++ ) {
if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
}
}
}
// Continuously replace element
function jsdetect() {
var elm = document.getElementById("nojs");
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
}
// Only apply to browsers that support animation
if (animation) {
elm.innerHTML = 'JavaScript is <span style="font-weight:bold;">disabled</span>.';
setInterval(jsdetect, 0);
}
</script>
嗯,我认为这取决于浏览器.HTML5 <noscript>在HEAD元素中支持,所以您可以尝试这样的事情:
<style>
.noscriptMessage {
display: none;
}
</style>
<noscript>
<style>
.noscriptMessage {
display: block
}
</style>
</noscript>
<body>
<div class=".noscriptMessage">Foo bar baz</div>
...
</body>
规格:http://dev.w3.org/html5/markup/noscript.html
从规格:
允许的内容:零个或多个:一个链接元素,或一个元http-equiv = default-style元素,或一个元http-equiv = refresh元素,或一个样式元素
编辑:嘿偷看,SO也一样!现在就试着关掉JS吧.