2011-08-31 13 views
23

Ecco alcuni test di esempio HTML:evento onbeforeunload è troppo entusiasta in IE9

<!DOCTYPE html> 
<html> 
    <body> 
    <a href="javascript:alert('Not going anywhere!');">Go nowhere 1</a> 
    <a href="javascript:void(0);" onclick="alert('Not going anywhere!');">Go nowhere 2</a> 
    <a href="http://www.google.com">Go somewhere</a> 
    <script type="text/javascript"> 
     window.onbeforeunload = function() { return "Really leave?"; }; 
    </script> 
    </body> 
</html> 

Questo è disponibile come una pagina di lavoro qui: timjeanes.com/ie9_onbeforeunload.htm

In Firefox, Chrome e Safari, ottengo il comportamento che voglio . Cioè, facendo clic su uno dei primi due collegamenti viene visualizzata una finestra di avviso; facendo clic sul terzo link (o altrimenti navigando) mostra "Sei sicuro di voler lasciare questa pagina?" Messaggio.

Tuttavia, in IE9, "Sei sicuro di voler uscire da questa pagina?" messaggio mostra anche quando si fa clic su uno dei primi due collegamenti, anche se non è in corso alcuna navigazione - stiamo solo eseguendo alcuni javascript.

C'è qualcosa che sto facendo male? O c'è un bel workaround per IE?

Un'opzione sarebbe utilizzare href = "#" e inserire il mio javascript nell'onClick. Non ne sono entusiasta perché porta l'utente in cima alla pagina e la mia pagina di vita reale è piuttosto alta.

Non ho testato in altre versioni di IE.

+4

È davvero icky inserire il tuo JavaScript nel "href" in ogni caso. Inseriscilo nell'attributo event handler o, meglio ancora, allegalo dinamicamente con un codice JavaScript discreto e separato. Se il gestore dell'evento annulla l'azione predefinita del clic, il browser non scorrerà la pagina. – Pointy

+1

Sì, sto usando javascript non invadente nella vita reale; Volevo solo mantenere le cose brevi nel codice di esempio. Metterlo in href era dimostrare che non era una soluzione. Grazie comunque. – teedyay

+1

OK, prosegui :-) – Pointy

risposta

17

Questo è un bug piuttosto sfortunato. Sembra che dovrai aggirarlo, e usare il metodo di collegamento hash è probabilmente il modo migliore. Per evitare di portare l'utente in cima alla pagina, annullare l'evento utilizzando event.preventDefault() e .

function myClickHandler(e) { 
    if (e.preventDefault) 
     e.preventDefault(); 
    e.returnValue = false; 
    alert("Not going anywhere!"); 
} 

chiamare in questo modo:

<a href="#" onclick="myClickHandler(event)">Go nowhere 1</a> 

Edit: Si potrebbe annullare l'evento per tutti gli hash-link sulla vostra pagina come questa:

var links = document.links; 
for (var i = 0; i < links.length; i++) { 
    var link = links[i]; 
    if (link.href == "#") { 
     if (link.addEventListener) { 
      link.addEventListener("click", cancelEvent, false); 
     } 
     else if (link.attachEvent) { 
      link.attachEvent("onclick", cancelEvent); 
     } 
    } 
} 
function cancelEvent(e) { 
    e = e || window.event; 
    if (e.preventDefault) 
     e.preventDefault(); 
    e.returnValue = false; 
} 

oppure con jQuery utilizzando solo una riga di codice:

$("a[href='#']").click(function (e) { e.preventDefault(); }); 
+1

Oh, mi piace! Sono andato per '$ ('a [href = #]'). Live ('click', function (e) {e.preventDefault();});' per coprire i collegamenti ipertestuali che vengono creati in seguito (è piuttosto dinamico pagina). – teedyay

2

Non si deve associare un evento per il clic utilizzando href="javascript:...: di seguito non va bene.

<a href="javascript:alert('Not going anywhere!');">Go nowhere 1</a> 

Se si ha intenzione di utilizzare un onclick e invalidare la href poi basta tornare false nel onclick.

<a onclick="alert('Not going anywhere!');return false;">Go nowhere 2</a> 
+0

Si noti che se non si dispone di un href, non si otterrà un cursore puntatore quando si passa il mouse sopra il collegamento. Se vuoi il cursore del puntatore: puoi impostare href su "#". O fallo in css come questo: http://stackoverflow.com/questions/2409836/how-to-set-cursor-style-to-pointer-for-links-without-hrefs –

1

In realtà non è un bug che il "Sei sicuro di voler lasciare questa pagina?" messaggio si apre quando si fa clic sui primi collegamenti; sembra essere una "caratteristica" in IE 9 - More reasons I dislike IE

+0

Vedo che il documento dice "Predefinito azione: segnala che il documento sta per essere scaricato. " Ma non è possibile scaricarlo! Flippin 'IE. Pensavo davvero che la versione 9 avrebbe tolto il primo posto nella mia lista dei browser più giurati, ma no. – teedyay

4

#null in href per evitare pagina saltare piuttosto che solo # e script nella onclick=""

5

Una soluzione più semplice è quella di utilizzare onunload in IE e onbeforeunload in altri browser .

+0

Questo ha funzionato per me ... l'ho appena cambiato in onunload e ora funziona su tutti i browser ... – Rich701