关闭 iframe 周围的指示灯
Turn off the light around iframe
我有关闭Youtube iframe周围的灯的代码,但它只能在chrome浏览器中正常工作。在 Firefox 中,我可以关灯,但不能再开灯了。知道为什么在火狐中不起作用吗?
代码(或 https://jsfiddle.net/uhL35f15/(:
<html>
<head>
<style>
.video {
position:relative;
z-index:102;
}
#persoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index:100;
}
</style>
</head>
<body>
<iframe class="video" width="640" height="360" src="https://www.youtube.com/embed/5HLtpoxOeuM" frameborder="0" allowfullscreen></iframe>
<br><br>
<button class="switch">turn off light</button>
(to turn on light - click somewhere)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
var per = 0;
$(document).ready(function(){
$("#persoff").css("height", $(document).height()).hide();
$(document).click(function(e) {
if(($(event.srcElement||e.srcElement).attr('class') != 'switch') && per == 1) {
$("#persoff").toggle();
per = 0;
}
});
$(".switch").click(function(){
$("#persoff").toggle();
per += 1;
if (per == 2) {
per = 0;
}
});
});
</script>
<div id='persoff'></div>
</body>
</html>
Firefox 不使用全局event
模型,您必须将其作为 hanlder 函数参数完整地传递。
在您的情况下,您已经将其作为e
传递。因此,使用e
不要在点击处理程序中event
。
编辑:实际上,在您的情况下,您无法检查event.srcElement
,因为在FF事件中undefined
。
编辑2:所以改用:if(!$(e.target).hasClass('switch') && per == 1)
作为旁注,我不明白你关于变量per
逻辑,但这完全偏离了主题。
js小提琴-
相关文章:
- 无法在图像周围添加按钮
- 如何在每个动态创建的ImageButton周围包装超链接?Visual Studio
- 为什么不是't这=>边界“;这个“;到周围的范围
- 如何在输入中选择的文本周围包装html标记
- 在html页面的属性周围添加了一个额外的空间
- Javascript选择周围的所有元素
- CSS 在悬停时使图像变暗 - 在其周围添加一个 href
- 从周围的 HTML 调用 SVG 中的 JavaScript 函数
- 提取周围方法的 JavaScript 版本
- 如何展开选择以包括周围的链接标记
- 使用D3.js的SVG圆周围的矩形之间的间隙不是通用的
- HTML5画布的包装:如何使(静态)形状在画布边缘周围继续
- 为什么只有当我在字符串周围输入引号时,表单输入的isNaN才为true
- JavaScript数组周围的引号(可能很容易修复)
- 当用户向下滚动我的网页时,如何删除chrome地址栏周围的边框
- 如何在Javascript中在桌子周围随机移动图像
- 如何在鼠标光标周围创建形状
- 单击时如何在按钮周围保留矩形边框
- 如何删除字符串周围的特定字符
- 关闭 iframe 周围的指示灯