javascript - bagaimana cara menghentikan penyegaran halaman induk saat jendela anak terbuka?

ketika saya mengklik tautan untuk membuka jendela anak, halaman induk otomatis menyegarkan. bagaimana saya bisa menghentikannya?

halaman induk tidak boleh menyegarkan saat jendela anak dibuka. bagaimana cara melakukannya? tolong bantu saya.

kode saya adalah sebagai berikut:

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

Jawaban #1

Halaman Anda menyegarkan karena tidak hanya fungsi Anda dipanggil, tetapi juga tautan yang ditunjukkan oleh tag a dijalankan. Jadi ada dua hal yang terjadi pada saat yang sama:

  • tautan itu sendiri mengarah ke apa pun yang ada di atribut href, bahkan jika kosong. Jika href kosong, itu berarti: muat ulang halaman ini.
  • penangkap acara onclick juga melakukan sesuatu (membuka popup), tetapi saat ini tidak membatalkan efek pertama.

Dalam reaksi pertama seseorang mungkin hanya menghapus atribut href yang bermasalah. Ini menyelesaikan masalah, tetapi menimbulkan masalah lain: Anda kehilangan semua gaya yang bagus pada teks tautan yang ditampilkan (seperti garis bawah, warna, perubahan kursor, urutan tab, ...), yang umumnya bukan yang Anda inginkan.

Berikut beberapa solusi yang lebih nyaman:

Biarkan penangani acara onclick mengembalikan false

Mengembalikan false akan membatalkan perilaku default anchor dan konten dari atribut href akan diabaikan:

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

Jika Anda peduli dengan browser yang tidak mendukung JavaScript (atau menonaktifkannya), maka letakkan url cadangan yang bermakna di atribut href, seperti:

href="javascript_is_required.html"

Gunakan event.preventDefault

Ini adalah alternatif dari return false. Ini memiliki keuntungan bahwa Anda dapat membuatnya dijalankan sebagai instruksi pertama, sehingga jika terjadi kesalahan saat runtime di kode lain, itu sudah menjalankan tugasnya:

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

Perhatikan bahwa objek event ini didefinisikan oleh semua browser dalam konteks atribut acara, dan harus dibedakan dari objek window.event, yang tidak didukung oleh semua browser.

Gunakan notasi hash di href

Beri nama pada anchor dan kemudian referensikan nama itu di atribut href. Dengan cara ini anchor akan menavigasi dirinya sendiri ke tampilan, yang biasanya sudah terlihat ketika pengguna mengkliknya:

name="loginlink" href="#loginlink"

Anda sering akan melihat variasi yang lebih pendek href="#", tetapi ini akan menggulir halaman ke atas ketika diklik, yang mungkin tidak masalah jika Anda yakin halaman tidak digulir ke bawah. Namun, penggunaan "#" memiliki efek samping: ketika diklik, url berubah dan url sebelumnya ditempatkan di tumpukan riwayat browser. Jadi jika setelah mengklik tautan Anda menekan tombol kembali, Anda tetap berada di halaman yang sama. Hal ini mungkin tidak diinginkan.

Gunakan protokol javascript: untuk tidak melakukan apa-apa

href="javascript:"

Ini akan membuat hyperlink mengeksekusi javascript apa pun setelah titik dua, dan karena tidak ada apa pun di sana, tidak akan terjadi apa-apa. Riwayat browser tidak diubah. Ada variasi dari metode ini, seperti javascript: return false; atau javascript: void(0);

Gunakan protokol javascript: untuk menangani event click

Dengan solusi ini Anda tidak lagi menggunakan atribut onclick. Sebagai gantinya, Anda memindahkan kode ke atribut href:

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

Pemisahan tata letak dan kode

Kode asli dan semua solusi di atas masih memiliki masalah yang tidak disukai banyak pengembang: HTML dicampur dengan kode javascript. Lebih baik memisahkan kedua hal ini.

Ini dapat dilakukan sebagai berikut:

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

Beberapa orang akan mengatakan ini juga memiliki sisi negatif: lebih sulit untuk mengidentifikasi kode yang dijalankan saat diklik. Kode di atas akan melampirkan handler acara pada event click dari elemen mylink. Pastikan untuk menjalankannya hanya setelah dokumen dimuat. Handler acara membatalkan perilaku klik default dengan dua cara. Pilih yang Anda sukai, atau keduanya jika mau. Karena dibatalkan, navigasi ke nilai atribut href tidak pernah dijalankan. Baris pertama menangani spesifik browser karena browser IE lama tidak melewatkan objek event sebagai argumen ke handler acara, tetapi menampilkan objek event global sebagai gantinya.

Jika Anda tidak perlu mendukung browser sebelum IE9, Anda dapat meningkatkan lebih lanjut dengan menggunakan addEventListener('click', myfunction); alih-alih onclick=myfunction; pada kode di atas. Ini memiliki banyak keuntungan: lebih banyak penangan acara dapat ditambahkan ke acara yang sama, dan Anda juga dapat menghapusnya satu per satu. jQuery menawarkan dukungan lintas browser yang baik untuk ini dengan .on().

Ada beberapa variasi dari solusi di atas, semuanya memiliki keuntungan dan kerugian masing-masing. Anda bahkan bisa menghindari penggunaan anchor untuk tujuan ini dan menggunakan elemen lain dengan penambahan gaya pada elemen tersebut.

Jawaban #2

Tulis return false(); setelah metode JS window.open().

Jika potongan kode di atas tidak berfungsi, ubah tag <button> default menjadi tag <input> biasa dengan type="button". Ini akan menyelesaikan masalah.

Di bawah ini adalah cuplikan kode:

JavaScript

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