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： 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中不会加载任何内容。

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

1 个答案:

修改