$ (cửa sổ) .blue sự kiện ảnh hưởng đến Iframe

Question

Tôi muốn phát hiện khi người dùng rời khỏi trang của tôi (ví dụ: mở tab mới) để tôi có thể dừng đếm ngược. Tôi đã làm nó sử dụng:

$(window).blur(function() { 
//stop countdown 
}); 

Nhưng tôi có Iframe bên trong trang của tôi và đếm ngược cũng dừng lại khi người dùng nhấp vào nó, nhưng tôi không muốn sự kiện trên để thực hiện khi ai đó nhấp vào Iframe.

Bất kỳ ý tưởng nào?

Update, tôi đang cố gắng hơn một chút, dựa trên câu trả lời này Click-event on iframe?:

iframeDoc = $('iframe').contents().get(0); 
$(iframeDoc).click(function(){ 
    //maybe remove blur event? 
}); 

Cập nhật: giải pháp Tim B làm việc:

$(window).blur(function() { 
// check focus 
if ($('iframe').is(':focus')) { 
    // dont stop countdown 
} 
else { 
    // stop countdown 
}     
}); 

Bây giờ tôi phải loại bỏ tập trung từ Khung nội tuyến mỗi lần sự kiện mờ được gọi, nếu không thì đếm ngược sẽ không dừng nếu người dùng thay đổi tab sau khi tập trung vào khung nội tuyến. Tôi đã thử cách sử dụng điều này ở trên:

if ($('iframe').is(':focus')) { 
    // dont stop countdown 
    $("iframe").blur() 
    $(window).focus(); 
} 

Nhưng nó không hoạt động. Bất kỳ ý tưởng?

Answer 1

Một giải pháp sẽ là kiểm tra iframe có trọng tâm và sau đó không ngừng bộ hẹn giờ. ví dụ.

$(window).blur(function() { 
    // check focus 
    if ($('iframe').is(':focus')) { 
     // dont stop countdown 
    } 
    else { 
     // stop countdown 
    }     
}); 

Bây giờ điều này sẽ hoạt động, tuy nhiên nếu khung nội tuyến của bạn có tiêu điểm khi người dùng thay đổi tab, đếm ngược sẽ không dừng lại. Vì vậy, trong tình huống này, bạn sẽ cần phải suy nghĩ của một giải pháp thanh lịch để di chuyển tập trung ra khỏi khung nội tuyến trước. Ví dụ: nếu người dùng nhấp vào iframe, hãy di chuyển tiêu điểm trở lại cửa sổ chính.

Edit - Cập nhật câu trả lời cho thêm các chức năng iframe

Ok vì vậy tôi đã được chơi về vấn đề này. Bây giờ tôi không biết bạn có nội dung gì trong khung nội tuyến của mình, nhưng bạn có thể thêm một số mã vào điều này về cơ bản sẽ gửi tiêu điểm trở lại đối tượng trong cửa sổ chính khi được nhấp vào. ví dụ.

Trong iFrame của bạn

<script> 
    $(function() { 
     $(document).click(function() { 
      // call parent function to set focus 
      parent.setFocus(); 
     }); 
    }); 
</script> 

Trong trang chính của bạn

<script> 

    function setFocus() { 
     // focus on an element on your page. 
     $('an-element-on-your-page').focus(); 
    } 

    $(function() { 

     $(window).focus(function (e) { 
      // bind the blur event 
      setBindingEvent(); 
     }); 

     var setBindingEvent = function() { 
      // unbind 
      $(window).unbind('blur'); 
      $(window).blur(function() { 
       // check focus 
       if ($('iframe').is(':focus')) { 
        // unbind the blur event 
        $(window).unbind('blur'); 
       } 
       else { 
        // stop countdown 
       }     
      }); 
     }; 

     setBindingEvent(); 

    }); 
</script> 

này sẽ cho phép bạn click vào khung nội tuyến, thiết lập tập trung trở lại trang chính, và sau đó dừng đếm ngược.

Answer 2

Do cách ly khung nội tuyến, việc nhấp vào bên trong khung nội tuyến được tính là làm mờ cho phụ huynh. Nếu nội dung của khung nội tuyến có thể được đưa vào bằng ajax, đó sẽ là một lựa chọn tốt hơn.