Tìm kiếm trang web

javascript - làm thế nào để ngăn trang cha làm mới khi cửa sổ con mở?

Khi tôi nhấp vào liên kết để mở cửa sổ con, trang cha tự động làm mới. Tôi làm thế nào để ngăn nó?

Trang cha không nên làm mới khi mở cửa sổ con. Làm thế nào để thực hiện điều này? Xin hãy giúp tôi.

mã của tôi như sau:

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

Câu trả lời #1

Trang của bạn được làm mới vì không chỉ hàm của bạn được gọi, mà còn cả liên kết được chỉ định bởi thẻ a cũng được thực thi. Vì vậy, bạn có hai việc xảy ra cùng một lúc:

  • Chính liên kết (hyperlink) dẫn đến bất cứ thứ gì có trong thuộc tính href, ngay cả khi nó trống. Nếu href trống có nghĩa là: tải lại trang này.
  • Bộ xử lý sự kiện onclick cũng làm một việc gì đó (mở một cửa sổ bật lên), nhưng hiện tại nó không hủy hiệu ứng đầu tiên.

Trong phản ứng đầu tiên, người ta có thể chỉ xóa thuộc tính href gây vấn đề. Điều này giải quyết được vấn đề, nhưng lại tạo ra một vấn đề khác: bạn sẽ mất tất cả các kiểu dáng đẹp trên văn bản liên kết hiển thị (như gạch chân, màu sắc, thay đổi con trỏ, thứ tự tab, ...), điều này thường không phải là điều bạn mong muốn.

Dưới đây là một số giải pháp tiện lợi hơn:

Hãy để trình xử lý sự kiện onclick trả về false

Trả về false sẽ hủy hành vi mặc định của liên kết và nội dung của thuộc tính href sẽ bị bỏ qua:

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

Nếu bạn quan tâm đến các trình duyệt không hỗ trợ JavaScript (hoặc đã tắt nó), thì hãy đặt một url dự phòng có ý nghĩa trong thuộc tính href, như sau:

href="javascript_is_required.html"

Sử dụng event.preventDefault

Đây là một phương án thay thế cho return false. Nó có ưu điểm là bạn có thể thực hiện nó như lệnh đầu tiên, để nếu có lỗi thời gian chạy xảy ra trong mã khác, nó đã thực hiện xong nhiệm vụ của mình:

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

Lưu ý rằng đối tượng event này được định nghĩa bởi tất cả các trình duyệt trong ngữ cảnh của các thuộc tính sự kiện, và cần phân biệt với đối tượng window.event, đối tượng này không được tất cả các trình duyệt hỗ trợ.

Sử dụng ký hiệu hash trong href

Đặt tên cho điểm neo và sau đó tham chiếu đến tên đó trong thuộc tính href. Bằng cách này, điểm neo sẽ tự điều hướng để hiển thị, điều mà nó thường đã làm khi người dùng nhấp vào nó:

name="loginlink" href="#loginlink"

Bạn sẽ thường thấy dạng rút gọn href="#", nhưng điều này sẽ cuộn trang lên đầu khi được nhấp, điều này có thể ổn nếu bạn chắc chắn rằng trang không bị cuộn xuống. Tuy nhiên, việc sử dụng "#" có một tác dụng phụ: khi nhấp vào, url sẽ thay đổi và url trước đó sẽ được đưa vào ngăn xếp lịch sử của trình duyệt. Vì vậy, nếu sau khi nhấp vào liên kết bạn nhấn nút quay lại, bạn vẫn ở trên trang. Điều này có thể không mong muốn.

Sử dụng javascript: để không làm gì cả

href="javascript:"

Điều này sẽ khiến siêu liên kết thực thi bất kỳ javascript nào theo sau dấu hai chấm, và vì không có gì ở đó, sẽ không có gì xảy ra. Lịch sử trình duyệt không bị thay đổi. Có những biến thể của phương pháp này, như javascript: return false; hoặc javascript: void(0);

Sử dụng giao thức javascript: để xử lý sự kiện click

Với giải pháp này, bạn không còn sử dụng thuộc tính onclick nữa. Thay vào đó, bạn chuyển đoạn mã sang thuộc tính href:

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

Tách biệt bố cục và mã

Mã gốc và tất cả các giải pháp trên vẫn có một vấn đề mà nhiều lập trình viên không thích: HTML bị trộn lẫn với mã javascript. Tốt hơn là nên tách riêng hai thứ này.

Điều này có thể được thực hiện như sau:

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

Một vài người sẽ nói điều này cũng có nhược điểm: khó xác định mã sẽ thực thi khi nhấp chuột. Mã trên sẽ gán bộ xử lý sự kiện cho sự kiện click của phần tử mylink. Hãy đảm bảo thực thi nó chỉ sau khi tài liệu đã tải xong. Bộ xử lý sự kiện hủy bỏ hành vi nhấp mặc định theo hai cách. Chọn cách bạn thích, hoặc cả hai nếu muốn. Khi bị hủy, việc điều hướng đến giá trị thuộc tính href sẽ không bao giờ được thực hiện. Dòng đầu tiên xử lý các đặc thù của trình duyệt vì các trình duyệt IE cũ không truyền đối tượng sự kiện như một đối số cho bộ xử lý sự kiện, mà thay vào đó sử dụng một đối tượng event toàn cục.

Nếu bạn không cần hỗ trợ trình duyệt trước IE9, bạn có thể cải thiện hơn bằng cách sử dụng addEventListener('click', myfunction); thay vì onclick=myfunction; trong mã trên. Điều này mang lại nhiều lợi ích: có thể gắn thêm nhiều trình xử lý sự kiện vào cùng một sự kiện, và bạn cũng có thể loại bỏ từng người một. jQuery hỗ trợ đa trình duyệt tốt với .on().

Có một số biến thể của các giải pháp trên, tất cả đều có những lợi ích và nhược điểm riêng. Bạn thậm chí có thể không sử dụng thẻ anchor cho mục đích này và thay vào đó dùng một phần tử khác với việc thêm kiểu dáng vào nó.

Câu trả lời #2

Viết return false(); sau phương thức JS window.open().

Trong trường hợp đoạn mã trên không hoạt động, hãy đổi thẻ <button> mặc định sang thẻ <input> bình thường với type="button". Điều này sẽ giải quyết vấn đề.

Dưới đây là đoạn mã:

JavaScript

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