$(window).blur event affecting Iframe
One solution would be to check if the iframe has the focus and then not stop the timer. e.g.
$(window).blur(function () {
// check focus
if ($('iframe').is(':focus')) {
// dont stop countdown
}
else {
// stop countdown
}
});
Now this would work, however if your iframe has the focus when the user changes tab, the countdown would not stop. So in this situation you would need to think of an elegant solution to move focus away from the iframe prior. For instance, if a user clicks within the iframe, immanently move focus back to the parent window.
Edit - Updated answer to include extra iframe functionality
Ok so I have been playing about with this. Now I don't know what content you have within your iframe, but you can add some code to this which basically sends the focus back to an object within the parent window when clicked on. e.g.
In your iFrame
<script>
$(function () {
$(document).click(function () {
// call parent function to set focus
parent.setFocus();
});
});
</script>
In your main page
<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>
This will allow you to click on the iframe, set focus back to the main page, and then stop the countdown.