更改iframe src可阻止父级隐藏
Changing iframe src stops parent from hiding
我有以下html。
<div id="video-popup-overlay"></div>
<div id="video-popup-container">
<div id="video-popup-close" class="fade"><i class="fa fa-times"></i></div>
<div id="video-popup-iframe-container">
<iframe id="video-popup-iframe" src="" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
基本上,当#video-popup-container
显示时,我会播放视频。我希望能够隐藏此视频。但通常情况下,当元素被隐藏时,视频仍在背景中播放。
这就是我想要更改src的原因。但是当我更改src时,元素不会隐藏。但是如果我不更改src,隐藏命令就可以工作。
发生这种情况有什么原因吗?
$("#video-popup-close, #video-popup-overlay").on('click', function(e){
$("#video-popup-iframe").attr('src', "");
$("#video-popup-overlay").hide();
$("#video-popup-container").hide();
});
下面是一个例子
隐藏后是否需要再次显示?既然您将iframe中的src
参数设置为空,我想可能不会?
如果是这种情况,我建议尝试使用.remove()
函数,而不是隐藏。即:
$("#video-popup-close, #video-popup-overlay").on('click', function(e){
$("#video-popup-overlay, #video-popup-container").remove();
});
更新:
根据提供的小提琴,看起来你打错了关闭的ID。在此处查看小提琴:https://jsfiddle.net/g139c9b0/2/
$("#video-popup-close, #video-popup-overlay").on('click', function(e){
$("#video-popup-overlay, #video-popup-iframe-container, #video-popup-close").hide();
$("#video-popup-iframe").attr('src', '');
});
更多更新:对不起,我想这已经足够推断了。是的,您将不得不添加一个show()
函数,因为您正在隐藏元素。这是完整的小提琴,正如我想你所期望的那样工作:https://jsfiddle.net/g139c9b0/3/
我对你为什么看到这种奇怪行为的最佳猜测是,iframe本身没有被视为当前DOM的一部分,所以隐藏它的容器不一定会级联到iframe窗口。通常,您无法使用javascript与iframe进行交互(如果没有一些解决方案)。它确实感觉有点像浏览器漏洞,但出于安全原因,它可能会正常工作。
您正在播放什么样的视频?是本地托管的文件、YouTube视频还是Vimeo?我之所以这么问,是因为如果是YouTube,也许你可以使用jQuery来停止视频。
话虽如此,我已经测试了你的代码,它似乎工作正常。你在浏览器控制台上收到任何错误吗?
$(".clickme").on('click', function(e){
e.preventDefault();
$("#video-popup-iframe").attr('src', "//player.vimeo.com/video/"+$(this).attr('id'));
$("#video-popup-overlay, #video-popup-container").show();
});
$("#video-popup-close, #video-popup-overlay").on('click', function(e){
$("#video-popup-overlay, #video-popup-container").hide();
$("#video-popup-iframe").attr('src', '');
});
#video-popup-overlay {
display: none;
position: fixed;
z-index: 995;
top: 0;
background-color: #000;
opacity: 0.8;
width: 100%;
height: 100%;
}
#video-popup-container {
display: none;
position: fixed;
z-index: 996;
width: 60%;
left: 50%;
margin-left: -30%;
top: 20%;
background-color: #fff;
}
#video-popup-close {
cursor: pointer;
position: absolute;
right: -10px;
top: -10px;
z-index: 998;
width: 25px;
height: 25px;
border-radius: 25px;
text-align: center;
font-size: 12px;
background-color: #000;
line-height: 25px;
color: #fff;
}
#video-popup-close:hover {
color: #DE0023;
}
#video-popup-iframe-container {
position: absolute;
z-index: 997;
width: 100%;
padding-bottom: 56.25%;
border: 2px solid #000;
background-color: #000;
border-radius: 2px;
}
#video-popup-iframe {
z-index: 999;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickme" id="161171581">
Click me
</div>
<div id="video-popup-container">
<div id="video-popup-close" class="fade">x</div>
<div id="video-popup-iframe-container">
<iframe id="video-popup-iframe" src="" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
另一种可能的解决方案:是否停止嵌入youtube iframe?
编辑:看看更新后的代码,这是预期的行为吗?第2版:https://jsfiddle.net/588chuyb/
在更改src
之前尝试隐藏。看看控制台,看看是否有消息,它应该会有所帮助。
$(document).on('click', '#video-popup-close, #video-popup-overlay', function(e){
$("#video-popup-overlay, #video-popup-container").hide();
$("#video-popup-iframe").attr("src", "");
});
- 在jquery中部分隐藏iframe
- 如果未正确加载,则隐藏iframe
- 单击后如何隐藏iframe
- 如果没有互联网连接,请隐藏iframe
- 如何在WordPress页面模板中隐藏iframe的元素
- 如何隐藏 Iframe src
- 当 iframe 没有 ID 时,对父级隐藏 iframe 中的元素
- 如何隐藏iframe src
- 隐藏iframe-隐藏时停止其中的脚本
- 如何在隐藏iframe时暂停YouTube播放器
- 如何使用Python Selenium单击隐藏iframe中的元素
- 隐藏iframe chrome回调未触发
- 使用隐藏iframe提交数据
- 隐藏Iframe刷新Ajax选项
- 如果内容为空,如何隐藏iframe
- 打开隐藏iframe下载文件
- PHP隐藏iframe直到特定日期
- 打印pdf隐藏iframe javascript/jquery c# MVC
- 隐藏iframe直到链接被点击,然后在链接被点击后隐藏链接
- 当元素单击时隐藏iframe