Question

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

我发现this似乎是我想要的，他们使用的是Bootstrap，而我正在使用Foundation6，我试图将其转换为基金会的工作，但我显然错过了一些东西。

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

模态：

<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包含自己的内容或JavaScript，否则您不需要iframe。只需使用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＆amp; .getBrochure是打开模态的三个按钮上的类。

Answer 3

此版本修复了在主页上加载iframe三次的问题：

 var rowId = $("#someTest tr").last().attr("data-userid");

<html>
    <title>This is test</title>
    
    <head>
    </head>
    <body>
        <table id="tblList">
    <tbody id="someTest">
      <tr data-userid="801992084067">
      <tr data-userid="451207954179">
      <tr data-userid="310896831399">
      <tr data-userid="863939754980">
      <tr data-userid="1123542226482">
    </tbody>
  </table>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
$(document).ready(function(){
    
   var rowId = $("#someTest tr").last().attr("data-userid");
    alert(rowId);
       
})
        </script>
    </body>
</html>

仅在模态打开时加载iframe scr

3 个答案: