Javascript 仅在模式打开时加载iframe scr

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

我发现这似乎是我想要的，他们使用Bootstrap，而我使用BuffTI6，我试着把它转换成基础工作，但是我显然遗漏了什么东西。 显然，如果没有下面这些，可能有更好的方法来实现我所需要的

情态动词：

<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');
    }
});

---

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

但您必须有一个.on（'open.zf.reveal'，…）事件。没有办法，因为你想知道模态什么时候打开

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

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

---

希望有帮助

对，我想我知道了

情态动词：

<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;
    }
});

var appendIFrameDemo=true；
var appendIFrameQuote=true；
var appendiframe=true；
$（“.bookDemo”）。单击（函数（）{
if（appendIFrameDemo）{
$（'.iframe container book'）。追加（''）；
appendIFrameDemo=false；
}
});
$（“.getQuote”）。单击（函数（）{
如果（附录引用）{
$（'.iframe容器引号'）。追加（''）；
appendIFrameQuote=false；
}
});
$（“.get宣传册”）。单击（函数（）{
如果（附录）{
$（'.iframe容器手册'）。附加（''）；
appendiframe=false；
}
});

---

.bookDemo、.getQuote和.Get宣传册是三个按钮上用于打开模态的类。

此版本修复了在主页上三次加载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>

---

在这些情况下，modals/iframe包含内容（表单）。是的，那么基本上你仍然在做上面所做的事情。但是，不要预加载模态的内容。如果iframe在模式关闭时仍然执行操作，则可能还希望在模式关闭时删除iframe。使用“closed.zf.reveal”事件。虽然我在第四个模式中使用了这个功能，但除了在主页上使用稍微不同的模板外，它也可以工作。在这里，由于一些未知的原因，它在Div中加载了三次。我想知道不使用谷歌分析之类的东西是否有原因？

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