javascript — загрузка iframe scr только при модальном открытии.

Question

javascript — загрузка iframe scr только при модальном открытии.

Мой клиент хочет отследить, открыл ли модал посетитель, единственный способ, который пришел ко мне, это загрузить iframe в модал, а затем у него есть URL для отслеживания. Но URL загружается независимо от того, открыт модал или нет.

я нашел этот кажется, это то, что я хочу, они используют 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');
}
});

3

iframe javascript jquery php zurb-foundation-6

Решение

Другие решения

Да, я думаю, что понял …

Модалы:

<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 — это классы на трех кнопках для открытия модалов.

0

В этой версии исправлена проблема с загрузкой 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;
}
});

0

Источник

Accepted Answer

Вам не нужен iframe, если только iframe не содержит своего собственного контента или JavaScript. Просто отправьте запрос AJAX на сервер с URL-адресом (и, если необходимо, параметрами запроса).

У вас должно быть событие .on (‘open.zf.reveal’, …). Обойти это невозможно, так как вы хотите знать, когда модал открыт.

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

По сути, все, что должно происходить в модале, когда оно открыто, должно быть сделано в функции события. Так что у вас не должно быть заранее определенного контента в модале.

Надеюсь, это поможет.

0