Ricerca nel sito web

javascript - come fermare l'aggiornamento della pagina principale mentre la finestra figlio è aperta?

quando clicco sul link per aprire una finestra figlia, la pagina principale si aggiorna automaticamente. come posso fermarlo?

La pagina principale non dovrebbe aggiornarsi mentre si apre una finestra figlia. Come fare? Per favore aiutami.

il mio codice è come di seguito indicato:

<html>
<head>
<title>login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
var popup;
function ShowPopup(url) {
if(popup)
    {
     popup.close();
     }
    popup = window.open(url, "self", "toolbar=no,scrollbars=yes,location=no,statusbar=no,menubar=no,resizable=0,width=300,height=350,left = 0,top = 0");
        popup.focus();
 }
</script>

</head>

<body>
<a href="" onclick="ShowPopup('popup_login.asp')" style="color: #1686CC;">Sign In / Register</a>
</body>
</html>

Risposta n. 1

La tua pagina si aggiorna perché non solo viene chiamata la tua funzione, ma viene eseguito anche il collegamento ipertestuale indicato dal tag a. Quindi hai due cose che accadono contemporaneamente:

  • l'ipertesto stesso naviga verso qualunque cosa sia nell'attributo href, anche se è vuoto. Se href è vuoto significa: ricarica questa pagina.
  • Il gestore dell'evento onclick fa anche qualcosa (apre un popup), ma attualmente non annulla il primo effetto.

In una prima reazione si potrebbe semplicemente rimuovere l'attributo href offensivo. Questo risolve il problema, ma ne introduce un altro: si perde tutto il bel formato sul testo del collegamento ipertestuale visualizzato (come sottolineatura, colore, cambio del cursore, ordine di tabulazione, ...), cosa che generalmente non si desidera.

Ecco alcune soluzioni più comode:

Lascia che il gestore dell'evento onclick restituisca false

Restituire false annullerà il comportamento predefinito dell'ancora e il contenuto dell'attributo href sarà ignorato:

onclick="ShowPopup('popup_login.asp'); return false;"

Se ti importano i browser che non supportano JavaScript (o lo hanno disabilitato), allora metti un url di riserva significativo nell'attributo href, come:

href="javascript_is_required.html"

Usa event.preventDefault

Questa è un'alternativa a return false. Ha il vantaggio che puoi farla eseguire come prima istruzione, così che se si verifica un errore a runtime nel codice successivo, avrà già svolto il suo lavoro:

onclick="event.preventDefault();ShowPopup('popup_login.asp');"

Nota che questo oggetto event è definito da tutti i browser nel contesto degli attributi degli eventi, e deve essere distinto dall'oggetto window.event, che non è supportato da tutti i browser.

Usa la notazione hash in href

Assegna un nome all'ancora e poi fai riferimento a quel nome nell'attributo href. In questo modo l'ancora si posizionerà da sola in vista, cosa che di solito già accade quando l'utente ci clicca sopra:

name="loginlink" href="#loginlink"

Vedrai spesso la variante più breve href="#", ma questo farà scorrere la pagina verso l'alto quando viene cliccato, il che potrebbe andare bene se sei sicuro che la pagina non sia stata scorsa verso il basso. Tuttavia, l'uso di "#" ha un effetto collaterale: quando viene cliccato l'url cambia e l'url precedente viene messo nella cronologia del browser. Quindi, se dopo aver cliccato il link premi il pulsante indietro, rimani sulla pagina. Questo potrebbe non essere desiderato.

Usa il protocollo javascript: per non fare nulla

href="javascript:"

Questo farà in modo che l'ipercollegamento esegua qualsiasi javascript che segue i due punti, e poiché non ce n'è, non succederà nulla. La cronologia del browser non viene modificata. Ci sono variazioni di questo metodo, come javascript: return false; o javascript: void(0);

Usa il protocollo javascript: per gestire l'evento click

Con questa soluzione non usi più l'attributo onclick. Invece sposti il codice nell'attributo href:

href="javascript: ShowPopup('popup_login.asp');"

Separazione del layout e del codice

Il codice originale e tutte le soluzioni sopra riportate hanno ancora un problema che a molti sviluppatori non piace: HTML è mescolato con il codice javascript. È meglio separare questi due.

Questo può essere fatto come segue:

<a href="javascript_is_required.html" id="loginLink"
   title="Click here to log on"> ... </a>
...
<script>
    document.getElementById('mylink').onclick = function(e) {
        e = e || event; // cross-browser way to get event object
        e.preventDefault(); // cancel the default click behaviour
        ShowPopup('popup_login.asp'); // your custom code comes here
        return false; // cancel the default click behaviour
    };
</script>

Alcuni diranno che anche questo ha un lato negativo: è più difficile identificare il codice che viene eseguito al clic. Il codice sopra allega il gestore dell'evento all'evento click dell'elemento mylink. Assicurati che venga eseguito solo dopo che il documento è stato caricato. Il gestore dell'evento annulla il comportamento predefinito del clic in due modi. Scegli quello che preferisci, o entrambi se vuoi. Poiché è annullato, la navigazione verso il valore dell'attributo href non viene mai eseguita. La prima riga gestisce le specifiche del browser in quanto i vecchi browser IE non passano l'oggetto evento come argomento al gestore dell'evento, ma espongono invece un oggetto event globale.

Se non devi supportare browser precedenti a IE9, puoi migliorare ulteriormente utilizzando addEventListener('click', myfunction); invece di onclick=myfunction; nel codice sopra. Questo ha molti vantaggi: è possibile aggiungere più gestori di eventi allo stesso evento e puoi anche rimuoverli uno per uno. jQuery offre un buon supporto cross-browser per questo con .on().

Esistono diverse varianti delle soluzioni sopra indicate, tutte con i loro vantaggi e svantaggi. Potresti persino evitare di usare un collegamento per questo scopo e utilizzare invece un altro elemento con uno stile aggiunto.

Risposta n. 2

Scrivi return false(); dopo il metodo JS window.open().

Nel caso in cui lo snippet sopra non funzioni, cambia il tag <button> predefinito in un normale tag <input> con type="button". Questo risolverà il problema.

Di seguito è riportato lo snippet di codice:

JavaScript

<script>
  function tagedlist() { 
    window.open("http://w3schools.com","mywindow","menubar=1,resizable=1,width=1000,height=1000");
    return false;           
  }
</script>