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

Question

我有两个想要实现的功能，仅在单击后加载 iframe（不是所有 iframe，仅此一个 - 每次单击）使用 .overlay。页面上有多个 .overlays 和 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： Load IFRAME onClick 和 Is it possible to not load an iframe in a hidden div, until the div is displayed?

.overlay 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>

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