javascript - jak zastavit obnovování rodičovské stránky, když je otevřeno okno dítěte?

Když kliknu na odkaz pro otevření podřízeného okna, rodičovská stránka se automaticky obnoví. Jak to mohu zastavit?

Rodičovská stránka by se neměla obnovovat, když je otevřeno dětské okno. Jak to udělat? Prosím, pomozte mi.

můj kód je uveden níže:

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

Odpověď č. 1

Vaše stránka se aktualizuje, protože není volána jen vaše funkce, ale také je vykonán hypertextový odkaz označený tagem a. Takže se dějí dvě věci současně:

Sám hypertextový odkaz naviguje na cokoliv, co je v atributu href, i když je prázdný. Pokud je href prázdný, znamená to: znovu načíst tuto stránku.
Obslužná rutina události onclick také něco dělá (otevírá vyskakovací okno), ale aktuálně nezruší první efekt.

V první reakci by člověk mohl jednoduše odstranit problematický atribut href. To problém vyřeší, ale přinese další: ztratíte veškeré hezké formátování zobrazeného textu odkazu (jako podtržení, barvu, měnící se kurzor, pořadí tabulátoru, ...), což obecně není to, co chcete.

Zde jsou některá pohodlnější řešení:

Nechte zpracovatel události onclick vrátit false

Vrácení false zruší výchozí chování odkazu a obsah atributu href bude ignorován:

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

Pokud vám záleží na prohlížečích, které nepodporují JavaScript (nebo jej mají vypnutý), vložte smysluplný záložní url do atributu href, například:

href="javascript_is_required.html"

Použijte event.preventDefault

Toto je alternativa k return false. Má tu výhodu, že ji můžete provést jako první příkaz, takže pokud dojde k chybě během běhu v jiném kódu, už vykonala svou funkci:

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

Všimněte si, že tento objekt event je definován ve všech prohlížečích v kontextu atributů událostí a je třeba jej odlišovat od objektu window.event, který není podporován ve všech prohlížečích.

Použijte značku hash v href

Dejte kotvě jméno a pak toto jméno odkazujte v atributu href. Tímto způsobem se kotva posune do zobrazení sama, což obvykle už je, když na ni uživatel kliknul:

name="loginlink" href="#loginlink"

Často uvidíte kratší variantu href="#", ale ta při kliknutí posune stránku na začátek, což může být v pořádku, pokud si jste jisti, že stránka není posunutá dolů. Přesto použití "#" má vedlejší účinek: při kliknutí se změní url a předchozí url se uloží do historie prohlížeče. Takže pokud po kliknutí na odkaz stisknete tlačítko zpět, zůstanete na stránce. To může být nežádoucí.

Použijte protokol javascript: k ničemu nezpůsobení

href="javascript:"

Toto způsobí, že hypertextový odkaz provede jakýkoli JavaScript následující po dvojtečce, a protože tam žádný není, nic se nestane. Historie prohlížeče se nezmění. Existují varianty této metody, jako javascript: return false; nebo javascript: void(0);

Použijte protokol javascript: k obsluze události click

S tímto řešením již nepoužíváte atribut onclick. Místo toho přesunete kód do atributu href:

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

Oddělení rozvržení a kódu

Původní kód a všechna výše uvedená řešení stále mají problém, který se mnoha vývojářům nelíbí: HTML je smícháno s javascript kódem. Je lepší tyto dvě věci oddělit.

To lze provést takto:

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

Někteří také řeknou, že to má i nevýhodu: je těžší identifikovat kód, který se spustí při kliknutí. Výše uvedený kód připojí obslužnou rutinu události k události click prvku mylink. Ujistěte se, že se spustí až po načtení dokumentu. Obslužná rutina události ruší výchozí chování kliknutí dvěma způsoby. Vyberte si ten, který preferujete, nebo oba, pokud chcete. Jelikož je zrušeno, navigace k hodnotě atributu href se nikdy neprovede. První řádek se zabývá specifiky prohlížeče, protože starší prohlížeče IE nepředávají objekt události jako argument obslužné rutině události, ale místo toho zpřístupňují globální objekt event.

Pokud nemusíte podporovat prohlížeče starší než IE9, můžete zlepšit svůj kód tím, že použijete addEventListener('click', myfunction); místo onclick=myfunction; ve výše uvedeném kódu. Má to mnoho výhod: na stejnou událost lze připojit více obslužných rutiny událostí a můžete je také odstraňovat jednotlivě. jQuery nabízí dobrou podporu pro různé prohlížeče prostřednictvím .on().

Existuje několik variant výše uvedených řešení, každé s vlastními výhodami a nevýhodami. Dokonce byste mohli přestat používat kotvu pro tento účel a místo toho použít jiný prvek s přidaným stylováním.

Odpověď č. 2

Napište return false(); po metodě JS window.open().

V případě, že výše uvedený úryvek nefunguje, změňte výchozí značku <button> na běžnou značku <input> s type="button". Tím se problém vyřeší.

Níže je uveden úryvek kódu:

JavaScript

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