仅在模态打开时加载 iframe src

Question

我的客户想要跟踪访问者是否打开了模态框，我想到的唯一方法是将 iframe 加载到模态框中，然后他们有一个要跟踪的 url。但是无论模态是否打开，都会加载 url。

我找到了this，这似乎是我想要的，他们正在使用 Bootstrap，而我正在使用 Foundation6，我尝试将其转换为适用于 Foundation，但显然缺少一些东西。

显然，如果没有以下内容，可能有更好的方法来实现我所需要的？

模态：

<div id="bookDemo" class="reveal-modal medium" data-id="0" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div class='iframe-container-book'>
    <iframe src="" scrolling="no" style='border:0'></iframe>
  </div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

<div id="getQuote" class="reveal-modal medium" data-id="1" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div class='iframe-container-quote'>
    <iframe src="" scrolling="no" style='border:0'></iframe>
  </div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

<div id="getBrochure" class="reveal-modal medium" data-id="2" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div class='iframe-container-brochure'>
    <iframe src="" scrolling="no" style='border:0'></iframe>
  </div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

脚本：

var iframes = ["URL1","URL2","URL3"];

$('.reveal-modal').on('open.zf.reveal', function() {
    var loaded = $(this).data('loaded');

    if(loaded == false) {
        var id = $(this).data('id');
        $(this).find('iframe').attr('src',iframes[id]);

        $(this).data('loaded', 'true');
    }
});

Answer 1

您不需要 iframe，除非 iframe 包含它自己的内容或 JavaScript。只需使用 URL（以及必要的查询参数）向服务器发送 AJAX 请求。

你必须有一个 .on('open.zf.reveal',...) 事件。没有办法解决这个问题，因为您想知道模式何时打开。

$('.reveal-modal').on('open.zf.reveal', function (evt) {
    $.ajax({
        url: url
        method: 'GET'
    });
})

基本上，当模式打开时需要在模式中发生的任何事情都需要在事件函数中完成。所以你不应该在模态框里有预定义的内容。

希望对您有所帮助。

Answer 2

好吧，我想我明白了……

模态：

<div id="bookDemo" class="reveal-modal medium" data-id="0" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div class='iframe-container-book'></div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="getQuote" class="reveal-modal medium" data-id="1" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div class='iframe-container-quote'></div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="getBrochure" class="reveal-modal medium" data-id="2" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div class='iframe-container-brochure'></div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

脚本：

var appendIFrameDemo = true;
var appendIFrameQuote = true;
var appendIFrameBrochure = true;
$(".bookDemo").click(function() {
    if(appendIFrameDemo) {
        $('.iframe-container-book').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-book" scrolling="no" style="border:0"></iframe> ');
        appendIFrameDemo = false;
    }
});
$(".getQuote").click(function() {
    if(appendIFrameQuote) {
        $('.iframe-container-quote').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-quote" scrolling="no" style="border:0"></iframe> ');
        appendIFrameQuote = false;
    }
});
$(".getBrochure").click(function() {
    if(appendIFrameBrochure) {
        $('.iframe-container-brochure').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-brochure" scrolling="no" style="border:0"></iframe> ');
        appendIFrameBrochure = false;
    }
});

.bookDemo、.getQuote 和 .getBrochure 是三个按钮上打开模态的类。

Answer 3

该版本修复了首页加载3次iframe的问题：

<div id="getnewsletterModal" class="newsletterReveal reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-newsletter'>
    <iframe id="iframeNewsletter" src="" scrolling="no" style='border:0'></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>

var appendIFrameNewsletter = true;
    $(".getnewsletterModal").click(function() {
        if(appendIFrameNewsletter) {
            $('#iframeNewsletter').attr('src', '[url here]');
            appendIFrameNewsletter = false;
        }
    });