Загрузите iframe scr только при открытии мода

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. Просто отправьте запрос AJAX на сервер с URL-адресом (и, если необходимо, параметрами запроса).

У вас должно быть событие .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 являются классы на трех кнопках, чтобы открыть модалы.