openplanning

Hướng dẫn và ví dụ Javascript HashChangeEvent

Xem thêm các chuyên mục:

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- HashChangeEvent

Hash là "phần mỏ neo" (Anchor part) của một URL. Nó nói với trình duyệt rằng hãy cuộn thanh cuộn của trình duyệt để hiển thị vùng nội dung tương ứng với Hash.
Ví dụ với Hash:
hash-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Hash Example</title>
      <meta charset="UTF-8">
      <style>
         .content {
            margin-top: 30px;
            padding: 5px;
            border: 1px solid #ddd;
         }
      </style>
   </head>
   <body>
       <a href="#chapter1">Go to Chapter 1</a>
        ||
       <a href="#chapter2">Go to Chapter 2</a>
        ||
       <a href="#chapter3">Go to Chapter 3</a>

      <div class="content">
         <!-- Anchor 1 -->
         <a id="chapter1"></a>
         <h3>Chapter 1</h3>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>

         <!-- Anchor 2 -->
         <a id="chapter2"></a>
         <h3>Chapter 2</h3>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/> 
         <!-- Anchor 3 -->
         <a id="chapter3"></a>
         <h3>Chapter 3</h3>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
      </div>
      <p id="log-div"></p> 
   </body>
</html>
 
HashChangeEvent
HashChangeEvent là một interface con của interface Event. Nó đại diện cho sự kiện xẩy ra khi "phần mỏ neo" (Anchor part) trên URL bị thay đổi.
Các sự kiện:
Event Mô tả
hashchange Sự kiện xẩy ra khi "phần mỏ neo" (Anchor part) của URL bị thay đổi.
Các thuộc tính (property):
Property Mô tả
newURL Trả về URL của tài liệu, sau khi Hash bị thay đổi.
oldURL Trả về URL của tài liệu, trước khi Hash bị thay đổi.
Về cơ bản các thuộc tính (property) newURL, oldURL của HashChangeEvent được hỗ trợ bởi tất cả các trình duyệt, ngoại trừ IE.
Ví dụ với HashChangeEvent:
hashchangeevents-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>HashChangeEvent Example</title>
      <meta charset="UTF-8">
      <style>
        .content {
           margin-top: 30px;
           padding: 5px;
           border: 1px solid #ddd;
        }
      </style>
      <script>
          function hashchangeHandler(evt)  {
              var msg = "Hash Change! \n"
                     + "event.newURL= "+ evt.newURL +"\n"
                     + "event.oldURL= "+ evt.oldURL ;
              alert(msg);
          }
      </script>
   </head>
   <body onhashchange="hashchangeHandler(event)"> 
            <a href="#chapter1">Go to Chapter 1</a>
             ||
            <a href="#chapter2">Go to Chapter 2</a>
             ||
            <a href="#chapter3">Go to Chapter 3</a>
           <div class="content">
              <!-- Anchor 1 -->
              <a id="chapter1"></a>
              <h3>Chapter 1</h3>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
              <!-- Anchor 2 -->
              <a id="chapter2"></a>
              <h3>Chapter 2</h3>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/> 
              <!-- Anchor 3 -->
              <a id="chapter3"></a>
              <h3>Chapter 3</h3>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
           </div>
   </body>
</html>
 

Xem thêm các chuyên mục: