简单的装载、计数和处理形式

Question

我需要一些有关我正在开发的脚本的帮助。我有一些广告。
当用户点击广告时，将打开一个新页面。

在该新页面上，将有一个用于状态消息的 div，在该 div 下方有一个大 iframe。

我想要这样的：
1. 在状态消息框中，应显示“正在加载 iFrame 的内容...”（直到 iFrame 的 url 已完全加载）
2. 它应该从 X 秒/加载栏开始倒计时。
3. 当它达到零时，应该运行一个表单，并在状态 div 中输出数据。

有人可以帮我获得这个吗？这一切都应该使用 jQuery 完成，无需任何重新加载。

到目前为止我已经知道了：

   var countDownTimer = null;
    var seconds = <?php echo $exposure[$r['exposure']]; ?>;

    function setCountDownTimer(){
      if(countDownTimer)
        clearTimeout(countDownTimer);

      countDownTimer = setTimeout(updateCountdown, 1000);
    };

    function updateCountdown() {
          countDownTimer = null;
          seconds--;

          if (seconds > 0) {
             $("#countdown").text("You must view this advertisement for " + seconds + " seconds.");
             //$('#progressbar').progressbar({ value: Math.round((seconds/10)*100) });
             setCountDownTimer();
          } else {
             submitForm();
          }
     }

// on document load:
$(function() {

   $("#progressbar").progressbar({ value: 0 });

   // set "waiting" message:
   $("#loadingStatus").html("Waiting for your advertisements to load...");

   // on iframe load:

   $('#iFrame').load(function() {

       $("#loadingStatus").html($("#isDone").html());

       //Attached click event to the link inside iframe to restart the timer
       var iframe = $('#iFrame');
       iframe.contents().find("linkSelector").click(function(){  
         window.top.setCountDownTimer();  
       });

   });

   setCountDownTimer();
});



function submitForm() {
                $("#countdown").empty().html('<img src="..ify/dream/images/loading.gif" />');
                $.post(
                    'index.php?i=v&p=k&key=DSF79SADFHSA7D9FGSAD097FSAD7F9779ASDFGS9', 
                    $('form').serialize(),
                    function (data) {
                        proccessData(data);
                    }
                ); 

}  

function proccessData (data) {
            $('#statusF').hide().html('');

            if(data=='success'){
                $('form').fadeOut();
                $('#countdown').addClass('noti-success').html('Advertisement validated!').slideDown();
                redirect("?i=l");  
            }
            else {
                $('#countdown').addClass('noti-error').html(data).fadeIn();
            }
        }

上面代码的问题是，当用户单击 iframe 时，状态消息计时器会混乱。所以 ：/

Answer 1

您需要使用 jQuery.ajax 方法（或其派生方法之一）。使用 jQuery.ajax，您可以将所需的任何数据发送到服务器以“运行表单”（如您所提到的），当您返回 html 时，您可以将其保存在变量中。然后，您可以使用计时器对象在超时到期时将 div 的 html 设置为新内容。