javascript - ako zastaviť obnovovanie rodičovskej stránky, keď je otvorené detské okno?

keď kliknem na odkaz na otvorenie detského okna, rodičovská stránka sa automaticky obnoví. ako to môžem zastaviť?

Rodičovská stránka by sa nemala obnovovať, keď je otvorené podradené okno. Ako to urobiť? Prosím, pomôžte mi.

môj kód je uvedený nižšie:

<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>

Odpoveď č. 1

Vaša stránka sa obnovuje, pretože sa nielen volá vaša funkcia, ale aj hypertextový odkaz označený značkou a sa vykonáva. Takže sa deje dve veci naraz:

  • sám hypertextový odkaz smeruje na čokoľvek, čo sa nachádza v atribúte href, aj keď je prázdny. Ak je href prázdny, znamená to: znova načítať túto stránku.
  • Handler udalosti onclick tiež robí niečo (otvára vyskakovacie okno), ale momentálne nezruší prvý efekt.

Pri prvej reakcii by niekto mohol jednoducho odstrániť problematický atribút href. Toto problém vyrieši, ale zavádza iný: stratíte všetko pekné formátovanie zobrazeného textu hypertextového odkazu (ako podčiarknutie, farbu, zmenu kurzora, poradie tabulátora, ...), čo vo všeobecnosti nie je to, čo chcete.

Tu je niekoľko pohodlnejších riešení:

Nechajte obslužnú rutinu udalosti onclick vrátiť false

Vrátenie false zruší predvolené správanie odkazu a obsah atribútu href bude ignorovaný:

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

Ak vám záleží na prehliadačoch, ktoré nepodporujú JavaScript (alebo ho majú vypnutý), potom vložte zmysluplnú záložnú url do atribútu href, napríklad:

href="javascript_is_required.html"

Použite event.preventDefault

Toto je alternatíva k return false. Má výhodu v tom, že ho môžete spustiť ako prvý príkaz, takže ak nastane chyba počas vykonávania iného kódu, už svoju úlohu vykonal:

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

Všimnite si, že tento objekt event je definovaný všetkými prehliadačmi v kontexte atribútov udalostí a treba ho odlíšiť od objektu window.event, ktorý nie je podporovaný všetkými prehliadačmi.

Použite hash notáciu v href

Dajte kotve meno a potom toto meno odkážte v atribúte href. Týmto spôsobom sa kotva posunie do zobrazenia sama, čo zvyčajne už je, keď na ňu používateľ klikne:

name="loginlink" href="#loginlink"

Často uvidíte kratšiu verziu href="#", ale táto po kliknutí posunie stránku na začiatok, čo môže byť v poriadku, ak si ste istí, že stránka nie je posunutá dole. Napriek tomu má použitie "#" vedľajší účinok: po kliknutí sa zmení url a predchádzajúca url sa vloží do histórie prehliadača. Takže ak po kliknutí na odkaz stlačíte tlačidlo späť, zostanete na stránke. Toto môže byť neželané.

Použite protokol javascript: na ničnerobenie

href="javascript:"

Toto spôsobí, že hypertextový odkaz vykoná akýkoľvek javascript nasledujúci po dvojbodke, a keďže tam nič nie je, nič sa nestane. História prehliadača nie je upravená. Existujú varianty tejto metódy, ako napríklad javascript: return false; alebo javascript: void(0);

Použite protokol javascript: na spracovanie udalosti click

S týmto riešením už nepoužívate atribút onclick. Namiesto toho presuniete kód do atribútu href:

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

Oddelenie rozloženia a kódu

Pôvodný kód a všetky vyššie uvedené riešenia stále majú problém, ktorý sa mnohým vývojárom nepáči: HTML je zmiešaný s javascript kódom. Je lepšie tieto dve veci oddeliť.

Toto možno vykonať nasledovne:

<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>

Niekoľko ľudí povie, že toto má aj nevýhodu: je ťažšie identifikovať kód, ktorý sa vykoná pri kliknutí. Vyššie uvedený kód pripojí obslužnú funkciu udalosti k udalosti click prvku mylink. Uistite sa, že sa vykoná až po načítaní dokumentu. Obslužná funkcia udalosti zruší predvolené správanie kliknutia dvoma spôsobmi. Vyberte si ten, ktorý uprednostňujete, alebo obidva, ak chcete. Keďže je zrušené, navigácia na hodnotu atribútu href sa nikdy nevykoná. Prvý riadok sa zaoberá špecifikami prehliadača, pretože staršie prehliadače IE neprenášajú objekt udalosti ako argument do obslužnej funkcie udalosti, ale namiesto toho odhaľujú globálny objekt event.

Ak nemusíte podporovať prehliadače pred IE9, môžete to zlepšiť použitím addEventListener('click', myfunction); namiesto onclick=myfunction; v uvedenom kóde. Má to mnoho výhod: k rovnakej udalosti môže byť pripojených viac obslužných funkcií a môžete ich tiež odstraňovať jednotlivo. jQuery ponúka dobrú podporu pre viacero prehliadačov pomocou .on().

Existuje niekoľko variantov vyššie uvedených riešení, všetky s ich výhodami a nevýhodami. Môžete sa dokonca vzdialiť od používania kotvy pre tento účel a namiesto toho použiť iný prvok s pridaným štýlovaním.

Odpoveď č. 2

Napíšte return false(); po JS metóde window.open().

V prípade, že vyššie uvedený útržok nefunguje, zmeňte predvolený tag <button> na obyčajný tag <input> s type="button". Toto vyrieši problém.

Nižšie je ukážka kódu:

JavaScript

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