问题：
为什么在单击时从iframe中删除属性？
计向晨
我点击图片，弹出效果很好。但是，当我在弹出窗口外单击时，iframe allowfullscreen和frameborder属性将被删除。我再次点击弹出窗口，全屏工作，有一条白线。我希望弹出停止视频播放一旦关闭和iframe返回没有src和保留其属性。
我试过：
- 使用JavaScript/jQuery更新属性
- 通过JavaScript/jQuery替换html（已注释掉）
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/portfolio.css" type="text/css">
</head>
<body>
<div class="page">
<a href="#media-popup" data-media="//www.youtube.com/embed/videoID"><img src="" width="100" height="100"></a>
<a href="#media-popup" data-media="//www.youtube.com/embed/videoID"><img src="" width="100" height="100"></a>
<div class="popup" id="media-popup">
<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>
</div>
</div>
<script src="/javascript/portfolio.js">
</script>
$("[data-media]").on("click", function(e) {
e.preventDefault();
var $this = $(this);
var videoUrl = $this.attr("data-media");
videoUrl += "?autoplay=1";
var popup = $this.attr("href");
var $popupIframe = $(popup).find("iframe");
$popupIframe.attr("src", videoUrl);
$this.closest(".page").addClass("show-popup");
});
$(".popup").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
//$("#media-popup").html('<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>');
$(".page").removeClass("show-popup");
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
});
html,
body {
margin:0; padding:0; height:100%;
}
p {
margin:0;
}
.page {
position: relative;
height:100%;
}
.popup {
position:absolute;
z-index:2;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
transition:.3s ease;
}
.show-popup .popup {
opacity:1;
visibility: visible;
}
.popup > iframe {
position:absolute;
top:50px;
left:50%;
margin-left:-280px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/portfolio.css" type="text/css">
</head>
<body>
<style src="/css/portfolio.css">
</style>
<div class="page">
<a href="#media-popup" data-media="//www.youtube.com/embed/videoID"><img src="" width="100" height="100"></a>
<a href="#media-popup" data-media="//www.youtube.com/embed/videoID"><img src="" width="100" height="100"></a>
<div class="popup" id="media-popup">
<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>
</div>
</div>
<script src="/javascript/portfolio.js">
</script>
</body>
</html>
CSS
html,
body {
margin:0; padding:0; height:100%;
}
p {
margin:0;
}
.page {
position: relative;
height:100%;
}
.popup {
position:absolute;
z-index:2;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
transition:.3s ease;
}
.show-popup .popup {
opacity:1;
visibility: visible;
}
.popup > iframe {
position:absolute;
top:50px;
left:50%;
margin-left:-280px;
}
JavaScript/jQuery
$("[data-media]").on("click", function(e) {
e.preventDefault();
var $this = $(this);
var videoUrl = $this.attr("data-media");
videoUrl += "?autoplay=1";
var popup = $this.attr("href");
var $popupIframe = $(popup).find("iframe");
$popupIframe.attr("src", videoUrl);
$this.closest(".page").addClass("show-popup");
});
$(".popup").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
//$("#media-popup").html('<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>');
$(".page").removeClass("show-popup");
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
});
共2个答案
匿名用户
在click函数之外定义iframe变量,以便它在其他地方可用：
var $popupIframe;
$("[data-media]").on("click", function(e) {
// ...
$popupIframe = $(popup).find("iframe");
$popupIframe.attr("src", videoUrl);
// ...
});
$(".popup").on("click", function(e) {
// ...
$popupIframe.attr('src', '');
});
演示
匿名用户
这是jQuery。需要加载。
$(document).ready(function() {
var $popupIframe;
$("[data-media]").on("click", function(e) {
e.preventDefault();
var $this = $(this);
var videoUrl = $this.attr("data-media");
videoUrl += "?autoplay=1";
var popup = $this.attr("href");
$popupIframe = $(popup).find("iframe");
$popupIframe.attr("src", videoUrl);
$this.closest(".page").addClass("show-popup");
});
$(".popup").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
//$("#media-popup").html('<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>');
$(".page").removeClass("show-popup");
$popupIframe.attr('src', '');
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
});
});
相关问题
- Proguard不处理FXML中的onAction调用
- 什么是最有效的方法来删除混淆的名称(《我的世界》)？
- Visual Studio Code 中的 JUnit
- 如何从命令行排除mvn构建路径中的特定苍蝇？
- 如何从源代码中正确构建keycloak
- 如何解决“HttpAuthenticationFactory的机制[KEYCLOAK]中没有所需的机制'BASIC'”
- 如何从 Git 克隆存储库并在 Java 中自动运行 Maven 构建
- java 13 jar文件在java 17中不起作用，收到错误UnafftedClassVersionError
- 在Windows Git bash中工作时，gitlab的Git克隆在linux上失败
- eclipse中的Java运行时环境内存不足消息
- fx:id="grid "在控制器中保持为空
- 如何填充在JavaFx Scene Builder中设计的fxml文件中定义的TableView
- JavaFX控制器中的NullPointerException
- 从事件中获取应用程序类
- 如何在JavaFX中正确显示第二个fxml文件视图？
- 如何将多个控制器连接到一个模型？JavaFX 中的简单窗口应用程序
- 如何在创建的原始窗口中的控制器之间进行转换
- 我应该如何从外部调用JavaFX中“Main”类中包含的方法？
- 使用ActionEvent在JavaFX中切换场景
- javaFX中的切换场景
共有4个答案
慕烨烁
热门标签
章乐逸
相关问题
慕光霁
这是jQuery。需要加载。
$(document).ready(function() {
var $popupIframe;
$("[data-media]").on("click", function(e) {
e.preventDefault();
var $this = $(this);
var videoUrl = $this.attr("data-media");
videoUrl += "?autoplay=1";
var popup = $this.attr("href");
$popupIframe = $(popup).find("iframe");
$popupIframe.attr("src", videoUrl);
$this.closest(".page").addClass("show-popup");
});
$(".popup").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
//$("#media-popup").html('<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>');
$(".page").removeClass("show-popup");
$popupIframe.attr('src', '');
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
});
});
濮波
在click函数之外定义iframe变量,以便它在其他地方可用：
var $popupIframe;
$("[data-media]").on("click", function(e) {
// ...
$popupIframe = $(popup).find("iframe");
$popupIframe.attr("src", videoUrl);
// ...
});
$(".popup").on("click", function(e) {
// ...
$popupIframe.attr('src', '');
});
演示
类似资料：
-
我有一个嵌套的列表框（主对象列表中的对象集合），它需要删除基础项。 删除项时，我可以重置主列表的itemssource，但主列表将有大量项，每次从其基础集合中移除项时，主滚动条也将重置，这使得用户愿意以非常痛苦的方式杀死我。 我的问题:如何找到项的容器，单击了哪个按钮，如何找到项本身，以便杀死@&！$*&#$@（诅咒拟声词）？ 以下是列表的XAML示例： 我的应该怎么样？
-
问题内容： 这是我的指令。在身体上显示一个Div。 并在title.html中 我包括这样的指令 因此，当我单击图像时，该`<div autosuggest=”” done-Flag=”1” group-Flag=”1” invitees- Flag=”1” selected-Array=”“ 问题答案： 您可以简单地创建一条指令，该指令添加一个函数，该函数将删除元素的html。然后，您可以将其粘
-
我有这样的标记 和像这样的JS 所以在这里，我希望当我点击课程时，只有课程内容会显示出来，就像这样，当我点击配置文件和库时，只有配置文件和库会显示出来。在这里，它的工作很好，但我想知道如何添加一个类活动时，一个项目被点击在锚标记。假设我点击了lessons，那么一个活动类应该被添加到lessons锚标记中，当我点击了profile，那么活动类应该被从lessons锚标记中移除，它应该在profil
-
我想在点击项目时从列表中删除该项目。当我删除其中一个单元格时，所有其余的单元格点击指示器都显示它们也被点击了。 另外，它不会删除它，只是使它暂时不可见。当我重新加载页面时，删除的单元格再次出现在内存中，并且再次可见。
-
将jmeter测试集设置为使用10个线程组运行8小时，每个线程组具有不同的线程数，还使用每个线程组具有不同TPS速率的吞吐量成形计时器；在一段随机时间（大多数时间在6小时后）后，其中一个线程组终止活动线程，我尝试了不同的配置以及穿透输出成形计时器，比如使用Concurrency线程组和循环控制器，但结果是相同的；这是我在日志中看到的： 我们感谢您为解决此问题提供的任何帮助。
-
我有一个这样的列表视图 这很好，因为它会遍历我的 table1 项。该列表包含名称和价格。我的问题是如何通过鼠标点击一个项目来删除项目，然后点击一个说删除的按钮？我看到的问题是，我不知道有多少项目可用，这取决于用户添加了多少个项目。