仅在模态打开时加载 iframe src

Posted 2023-05-09

【中文标题】仅在模态打开时加载 iframe src

【英文标题】：Load an iframe scr only on modal open

【发布时间】：2017-01-09 09:08:13

【问题描述】：

我的客户想要跟踪访问者是否打开了模态框，我想到的唯一方法是将 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');
    
);

【问题讨论】：

我想知道是否有理由不使用谷歌分析之类的东西？

【参考方案1】：

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

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

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

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

希望对您有所帮助。

【讨论】：

在这些情况下，模态框/iframe 包含内容（表单）。

是的，那你基本上还是在做你上面做的事情。但是，不要预加载模态框的内容。如果在模态关闭时它仍然执行操作，您可能还希望在模态关闭时删除 iframe。使用“closed.zf.reveal”事件。

【参考方案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 是三个按钮上打开模态的类。

【讨论】：

虽然我已经为第四个模态做了这个，除了主页，它使用了一个稍微不同的模板。在这里，由于某种未知原因，它在 Div 中加载了

【参考方案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;
        
    );