Mục lục

Hướng dẫn sử dụng Javascript HashChangeEvent

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

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: