如何在函数 .overlay 之后加载 iframe?

Question

我有两个函数想要发生，仅在单击后加载 iframe(不是所有 iframe，只有这个 - 每次点击(使用 .overlay。页面上有多个 .overlay 和 iframe。

我已经检查了各种网站，这些网站单独工作，但我无法让两者一起工作。

覆盖：

$(function() {
$("span[rel]").overlay();
});

iframe 代码选项 1：

$(function() {
$('.overhover').click(function(e) {
e.preventDefault();
var iframe = $(this).next();
iframe.attr("src", iframe.attr("data-src")); 
});

iframe 代码选项 2：

$(function(){
$(this).find("iframe").prop("src", function(){
return $(this).data("src");
});
});

我的代码：

<a href="#" class="overhover">Test</a>
<iframe data-src="http://www.bing.com" src="about:blank">
</iframe>

<a href="#" class="overhover">test</a>
<iframe data-src="http://www.bing.com" src="about:blank">
</iframe>

<!-- Actual code -->
<div class="res-item">
<h4>Header</h4>
<h2>
<!-- Overlay Link -->
<span class="overhover" rel="#tool3">Title
</span>
</h2>
<!-- Overlay Insert -->
<div class="simple_overlay" id="tool3">
<iframe seamless="" data-src="http://www.bing.com" style="width:100%; height:75vh;" frameborder="0">
</iframe>
</div>
</div>

此处不包括 CSS。 谢谢

加载 iframe： 在单击时加载 IFRAME 和 在显示div 之前，是否可以不加载隐藏div 中的 iframe？

。覆盖 http://jquerytools.github.io/demos/overlay/index.html

Answer 1

根据您的"实际代码"，这就是我要做的：

编辑

我已经修改了代码，因此它实际上可以执行您想要的操作。此外，出于演示目的，稍微修改了您的"原始"代码。

$(function() {
var toolID;
$("span[rel]").on('click', function() {
//so we get the ID of the tool we'll be loading later
toolID = $(this).attr('rel');
}).overlay({
onLoad: function() {
var ifSrc = $(toolID + ' iframe').attr('data-src');
$(toolID + ' iframe').attr('src', ifSrc);
$(toolID + ' iframe').show();
}
});
});

.simple_overlay iframe {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tools/1.2.7/jquery.tools.min.js"></script>
<div class="res-item">
<h1>Header</h1>
<h2>
<!-- Overlay Link -->
<ul>
<li><span class="overhover" rel="#tool3">Bing</span></li>
<li><span class="overhover" rel="#tool4">Duck Duck Go</span></li>
</ul>
</h2>
<!-- Overlay Insert -->
<div class="simple_overlay" id="tool3">
<iframe data-src="https://bing.com" style="width:100%; height:75vh;" frameborder="0"></iframe>
</div>
<div class="simple_overlay" id="tool4">
<iframe data-src="https://duckduckgo.com/" style="width:100%; height:75vh;" frameborder="0"></iframe>
</div>
</div>

您可以从那里获取它，并对其进行修改以满足您的需求。另外，请注意，必应的协议是https，而不是http。 如果您使用后者，则iframe中不会加载任何内容。