How can I prevent window.onbeforeunload from being triggered by javascript: href links in IE?

落爺英雄遲暮 提交于 2019-12-02 14:41:43

You may remove and re-assign the onbeforeunload when hovering those links:

jQuery(
  function($)
  {
      //store onbeforeunload for later use
    $(window).data('beforeunload',window.onbeforeunload);  

      //remove||re-assign onbeforeunload on hover 
    $('a[href^="javascript:"]')
      .hover( 
             function(){window.onbeforeunload=null;},
             function(){window.onbeforeunload=$(window).data('beforeunload');}
            );

  }
);

I just ran into a similar problem and found a very easy solution:

$("a").mousedown(function() {
    $(window).unbind();
});

This will remove the onbeforeunload event just before the click event is triggered.

Move any script to a click event handler instead, with a fallback page for users without JavaScript:

<a href="foo.html" onclick="someFunction(); return false">click</a>

The unobtrusive JS champions out there will probably object to the use of the onclick attribute, but the fact is that it works, it's the simplest way to add an event handler and the simplest way to provide an example. For better separation of concerns, you could instead use either a DOM0 onclick property, addEventListener() / attachEvent() or a library.

If you include a bookmark symbol in the href of the a tag you should be able to still use the onclick event to include your JavaScript.

<a href="#" onclick='someFunction();'>click</a>

I’ve run a number of tests and this appears to execute the JavaScript without triggering the onbeforeunload event. I’d be curious to know if this works for others or if you still have the same problem after implementing a tags in this manner.

(Like some of the other answers, this requires changing how the JavaScript is bound. If that doesn't work for you, disregard.)

I found that in IE 7 through IE 10, simply using jQuery .click() with preventDefault works without showing the onbeforeunload message (IE 11 does not show the beforeunload message for any of my test cases). This is true whether the href is '#' or javascript:void(0). I expect the conclusion holds if attachEvent/addEventListener is used directly, but I didn't test that.

There is a demo of the below at http://jsbin.com/tatufehe/1 . Both of the versions (in green) with preventDefault work (don't show the beforeunload dialog). The one without preventDefault does show it (as a comparison).


$( document ).ready( function () {
  $( 'a' ).click( function ( evt ) {
    $( '#display' ).text( 'You clicked: ' + $( this ).text() );

    if ( $(this).hasClass( 'withPreventDefault' ) ) {
      evt.preventDefault();
    }
  } );
})

window.onbeforeunload = function () {
  return "Are you sure you want to leave?";   
};

<p id="display"></p>

<p><a class="withPreventDefault" href="#">Number sign link *with* preventDefault</a></p>

<p><a class="withPreventDefault" href="javascript:void(0);">JavaScript href link *with* preventDefault</a></p>

<p><a href="javascript:void(0);">JavaScript href link *without* preventDefault</a></p>

If the user mouse is on a link and they trigger refresh page with the keyboard or activate a link with the keyboard, the prompt won't show up. So Dr.Molle approach will not work in this rare case.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!