javascript - çocuk pencere açıkken ana sayfanın yenilenmesini nasıl durdururum?

Çocuk pencereyi açmak için linke tıkladığımda, ana sayfa otomatik olarak yenileniyor. Bunu nasıl durdurabilirim?

Alt pencere açıkken ana sayfa yenilenmemeli. Bunu nasıl yapabilirim? Lütfen yardım edin.

Kodum aşağıda verilmiştir:

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

Cevap #1

Sayfanız yenileniyor çünkü sadece fonksiyonunuz çağrılmıyor, aynı zamanda a etiketiyle belirtilen köprü de çalıştırılıyor. Yani aynı anda iki şey oluyor:

hiperlinkin kendisi, href özniteliğinde ne varsa ona gider, boş olsa bile. Eğer href boşsa bu şunu ifade eder: bu sayfayı yeniden yükle.
onclick olay işleyicisi de bir şey yapar (bir açılır pencereyi açar), fakat şu anda ilk etkiyi iptal etmiyor.

İlk tepki olarak, yalnızca sorunlu href özniteliğini kaldırabilirsiniz. Bu sorunu çözer, ancak başka bir sorun yaratır: Görüntülenen köprü metnindeki tüm güzel stillemeleri (alt çizgi, renk, fare imlecinin değişmesi, sekme sırası, ...) kaybedersiniz, bu da genellikle istediğiniz şey değildir.

İşte bazı daha uygun çözümler:

onclick olay işleyicisinin false döndürmesine izin verin

false döndürmek, anchor'ın varsayılan davranışını iptal edecek ve href özniteliğinin içeriği yoksayılacaktır:

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

Eğer javascript desteği olmayan (veya devre dışı bırakılmış) tarayıcıları önemsiyorsanız, href özniteliğine anlamlı bir geri dönüş url koyun, örneğin:

href="javascript_is_required.html"

event.preventDefault kullanın

Bu, return false'e bir alternatiftir. Bunun avantajı, ilk talimat olarak çalıştırılmasını sağlayabilmenizdir, böylece diğer kodda bir çalışma zamanı hatası oluşursa, zaten işini yapmış olacaktır:

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

Tüm tarayıcılar tarafından olay öznitelikleri bağlamında tanımlanan bu event nesnesine dikkat edin ve tüm tarayıcılar tarafından desteklenmeyen window.event nesnesinden ayırt edilmelidir.

href içinde hash gösterimini kullanın

Bağlantıya bir ad verin ve ardından bu adı href özniteliğinde referans verin. Bu şekilde bağlantı kendini görünüm içine yönlendirecektir, ki kullanıcı bunu tıkladığında genellikle zaten görünümde olur:

name="loginlink" href="#loginlink"

Daha kısa olan href="#" varyasyonunu sıkça göreceksiniz, fakat bu tıklandığında sayfayı en üste kaydırır, bu da sayfanın aşağı kaydırılmadığından emin olduğunuz durumlarda sorun olmayabilir. Yine de, "#" kullanımının bir yan etkisi vardır: tıklandığında url değişir ve önceki url tarayıcının geçmiş yığınına eklenir. Bu yüzden bağlantıya tıkladıktan sonra geri tuşuna basarsanız, sayfada kalırsınız. Bu istenmeyen bir durum olabilir.

Hiçbir şey yapmamak için javascript: protokolünü kullanın

href="javascript:"

Bu, köprüyü iki nokta üst üste işaretinden sonra gelen herhangi bir JavaScript'i çalıştıracak şekilde yapacaktır ve orada olmadığı için hiçbir şey olmayacaktır. Tarayıcı geçmişi değiştirilmez. Bunun gibi yöntemlerin farklı versiyonları vardır, örneğin javascript: return false; veya javascript: void(0);

click olayını işlemek için javascript: protokolünü kullanın

Bu çözüm ile artık onclick özniteliğini kullanmıyorsunuz. Bunun yerine kodu href özniteliğine taşıyorsunuz:

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

Yerleşim ve kodun ayrılması

Orijinal kod ve yukarıdaki tüm çözümler hâlâ birçok geliştiricinin hoşlanmadığı bir soruna sahip: HTML javascript kodu ile karışmış durumda. Bu ikisini ayırmak daha iyidir.

Bu şu şekilde yapılabilir:

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

Birkaçı bunun da bir dezavantajı olduğunu söyleyecektir: tıklama sırasında hangi kodun çalıştığını tespit etmek daha zordur. Yukarıdaki kod, mylink elemanının click olayına olay işleyicisini ekleyecektir. Belge yüklendikten sonra çalıştığından emin olun. Olay işleyici, varsayılan tıklama davranışını iki şekilde iptal eder. Tercih ettiğinizi seçin veya isterseniz her ikisini de kullanın. İptal edildiği için, href öznitelik değerine olan navigasyon hiçbir zaman gerçekleşmez. İlk satır tarayıcıya özgü durumlarla ilgilenir çünkü eski IE tarayıcıları olay nesnesini olay işleyiciye bir argüman olarak geçirmez, bunun yerine global bir event nesnesi sunar.

Eğer eski IE9 öncesi tarayıcıları desteklemek zorunda değilseniz, yukarıdaki kodda onclick=myfunction; yerine addEventListener('click', myfunction); kullanarak daha da geliştirebilirsiniz. Bunun birçok avantajı vardır: aynı olaya daha fazla olay işleyici eklenebilir ve bunları teker teker de kaldırabilirsiniz. jQuery, bunun için .on() ile iyi bir çapraz tarayıcı desteği sunar.

Yukarıdaki çözümlerin birkaç farklı çeşidi vardır, her birinin avantajları ve dezavantajları vardır. Hatta bu amaçla bir ankraj kullanmaktan vazgeçebilir ve yerine başka bir öğe kullanarak buna stil ekleyebilirsiniz.

Cevap #2

JS yöntemi window.open()'den sonra return false(); yazın.

Yukarıdaki kod parçacığı çalışmıyorsa, varsayılan <button> etiketini normal <input> etiketiyle type="button" olarak değiştirin. Bu sorunu çözecektir.

Aşağıda kod parçacığı bulunmaktadır:

JavaScript

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