mailto link (in chrome) is triggering window.onbeforeunload - can i prevent this?

问题

Possibly related to How to open mailto link in Chrome with Window.open without creating a new tab?

Hi all. I have a form page where i've put a window.onbeforeunload confirm, to stop people navigating away and losing their changes by accident:

window.onbeforeunload = function(){
  if(changed)
    return "You have unsaved changes.  Do you really want to leave this page without saving?";
};

where changed is a variable i set to true whenever the user makes any changes. That's all fine. However, i've also added some mailto links to the page, like so:

<a class="button button-alt" href="mailto:foo@foo.com">Report a problem</a>

Even though the mailto isn't navigating away from the page (it's opening the users default mail app), it's still triggering the onbeforeunload event, prompting the confirm box, which is annoying. I can get round it setting target="_blank" on the link, but then the user is left sitting in an empty tab.

Can i set the mailto link to not trigger the onbeforeunload event? I thought of a horribly hacky way of doing it by having another temporary javascript variable which causes the onbeforeunload confirm to not trigger, but it seems kind of dirty. I'll do it anyway while i wait for a response but does anyone have a nicer solution?

thanks, max

回答1:

Building off of epascarello's solution, the following JQuery code should do the trick:

    var ignore_onbeforeunload = false;
    $('a[href^=mailto]').on('click',function(){
        ignore_onbeforeunload = true;
    });

    window.onbeforeunload = function() {
        if (!ignore_onbeforeunload){
            return "Halt! you are not supposed to leave!";
        }
        ignore_onbeforeunload = false;
    };

回答2:

A really simple fix to this is to do something like this:

<a href="mailto:foo@bar.com" target="hidden-iframe">Email me</a>
<iframe name="hidden-iframe" style="visibility:hidden;position:absolute;"></iframe>

(And of course, move the styles to their own stylesheet instead of inlining them.)

回答3:

Add a flag and see if it is flipped, set the flag on the link click.

var ignore = false
window.onbeforeunload = function() {
    if (changed && !ignore) {
        return "You have unsaved changes.  Do you really want to leave this page without saving?";
    } else {
        ignore = false;
    }
}

And the link

<a class="button button-alt" href="mailto:foo@foo.com" onclick="ignore=true">Report a problem</a>

It would be better to add the onclick with JavaScript code.

回答4:

Another option, also a bit hacky but a bit more generic way to make the beforeunload ignore certain types of links:

In the beforeunload, inspect the link that caused the beforeunload, and if it is not a http or https link, don't bother the user.

Unfortunately it is not easy to inspect the link that caused the beforeunload, so this is where it gets a little hacky with an onclick handler and global variable.

var lastClicked = null;
window.onclick = function(e){
    e = e || window.event;
    lastClicked = e.target
}
window.onbeforeunload = function(e){
    if (changed && lastClicked && lastClicked.href 
        && lastClicked.href.substring(0,4) == 'http')
        return "You have unsaved changes";
}

Edit: Almost forgot, this answer comes from here: https://stackoverflow.com/a/12065766/421243

回答5:

I managed to solve this problem inside the onbeforeunload event by checking event.target. This way you dont have to use outer variables or any extra bindings.

window.onbeforeunload = function (event) {

    var activeElement = $(event.target.activeElement);
    // console.log('onbeforeunload', activeElement);

    var isMailto = activeElement && activeElement.is('[href^=mailto:]');
    var isTel = activeElement && activeElement.is('[href^=tel:]');

    if(!isMailto && !isTel) {
        // logic when link is "normal"
    }
};

来源：https://stackoverflow.com/questions/9740510/mailto-link-in-chrome-is-triggering-window-onbeforeunload-can-i-prevent-this

标签

javascript

mailto

onbeforeunload