Preventing F5 inside an iFrame using jQuery

Question

Our application has a requirement that users are not allowed to refresh a webpage using F5.

I've implemented the solution here however I've just discovered that this does not work inside an iframe on the page.

The iframe is generated from a telerik radeditor control.

I've tried doing the following inside my page containing the radeditor.

$(function () {
    $('#<%=RadEditor1.ClientID %>_contentIframe html').bind('keydown', function () {
        if (window.event && window.event.keyCode == 116) {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
            window.event.keyCode = 0;
            window.status = "F5 is disabled on all popups";
            return false;
        }
    });
});

However it is not working.

Is there something special about iframes that I am missing?

Answer 1

Knowing that you want to prevent users from losing data while they are working on the page, I'd propose a different solution. Why not just hook into when they leave the page, and prompt to see if they meant to do that?

Best way to detect when a user leaves a web page?

Gmail uses this method when messages haven't saved/been sent yet. This will help you cover many scenarios, keep your users happy, and still allow F5 to work if someone desires.

Answer 2

This method works consistently.

$(function () {
    function addF5Handler(){
        el = $('body', $('#myframe').contents());
        if(el.length != 1) {
            setTimeout(addF5Handler, 100);
            return;
        }
        $($('#myframe').get(0).contentWindow.document).keydown(function () {
            var myWindow = $('#myframe').get(0).contentWindow;
            if (myWindow.event && myWindow.event.keyCode == 116) {
                myWindow.event.cancelBubble = true;
                myWindow.event.returnValue = false;
                myWindow.event.keyCode = 0;
                myWindow.status = "F5 is disabled on all popups";
                return false;
            }
        });
    }
    addF5Handler();
});