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?

That's the most ridiculous requirement I've ever heard of. Please tell me that your web application is actually embedded in something else, such as a kiosk, and that this isn't a standard web page? If so, it would be better to disable the behavior outside of the browser frame, in the hosting application. — Brad, Apr 25 '12 at 17:01
Yeah, what is to prevent the user from clicking on the refresh button of their browser? — Tejs, Apr 25 '12 at 17:03
@Brad Yeah I get that a lot on here, this is an internal application and our users get pissed if they accidentally hit F5 while they are writing reports and entering data. Our users are not technical and would never hit F5 normally. If they want to refresh the page they can right click. — Biff MaGriff, Apr 25 '12 at 17:04

score 5 · Answer 1 · edited May 23 '17 at 11:49

5

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.

edited May 23 '17 at 11:49

Community

1
1

answered Apr 25 '12 at 17:06

Brad

159,648
54
349
530

I've +1'ed this, though it still doesn't cover the scenario of a refresh within the iframe. – michaelward82 Apr 25 '12 at 18:03
@michaelward82, It doesn't? `onbeforeunload` works fine on refresh. Perhaps it's a browser specific issue? – Brad Apr 25 '12 at 18:08
This works for the iframe however it also breaks the navigation in the system (double prompts for every page change and telerik popup windows no longer load). Is there a way to check inside the onbeforeunload if it was the F5 key that triggered it? – Biff MaGriff Apr 25 '12 at 19:18
@BiffMaGriff, Not that I know of. I might suggest there is a better way to implement it than what you have. I'd suggest posting a new question with the specific issues you're running into with `onbeforeunload`, along with some of your HTML/JS. Be sure to post a link to it in the comments here, and I'd be happy to take a look. – Brad Apr 25 '12 at 19:22
I'm pretty sure the issues are all related to telerik controls. I'm going to continue trying to figure out a way to bind to the iframe, `onbeforeunload` does not seem viable in my situation. – Biff MaGriff Apr 25 '12 at 19:33

Biff MaGriff · Accepted Answer · 2012-04-27T16:06:45.267

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();
});

score 1 · Answer 3 · answered Apr 25 '12 at 17:31

1

I think the only option you have is this:

$(window).on('beforeunload', function () {
  return 'Leave?';
});

Put this inside the iFrame page.

answered Apr 25 '12 at 17:31

Registered User

3,669
11
41
65

Preventing F5 inside an iFrame using jQuery

3 Answers3