23/01/2014

Code auto refresh – tự động load lại trang web

Trong một số trường hợp bạn cần thiết load lại trang web mình theo chu kỳ cố định hay random … thì bạn sẽ làm thế nào? hôm nay mình muốn chia sẻ cho các bạn cách làm này qua bài viết Code auto refresh – tự động load lại trang web rất đơn giản và dễ sử dụng.


Auto refresh – tự động load lại trang web là một tính năng nhỏ trong web, cũng ít được biết đến cũng như ứng dụng nó. Tuy nhiên nói thế nó không phải là vô dụng, giả sử bạn làm một trang web có tính cập nhật dư liệu liên tục như: truyền tin trực tiếp, cập nhật giá cả, cổ phiếu … tiện cho người dùng không phải f5 để load lại trang web nhiều lần.

Code auto refresh website
Code auto refresh website

Đôi khi bạn nghĩ là làm công việc này có lợi cho SEO vì nó tự động load lại trang web liên tục có thể tăng lượng view, rank cho site bạn, hii.. tuy nhiên cái gì cũng thế kỹ xảo nhiều quá đôi khi lại phản tác dụng nhất là bác google khó tính, chỉ nên cần thì dùng là hay nhât.
Sau đây sẽ có nhiều cách để bạn thực hiện được việc auto refresh trang web, chỉ là dùng các thẻHTML hay vài đoạn jQuery & JavaScript là OK, ngoài ra còn có thể sử dụng bằng cách tùy chỉnh trên trình duyệt.
1. Auto refresh bằng thẻ meta
Cách này có ưu thế là nhanh gọn dễ làm, truy nhiên do dùng thẻ meta nên không thể che dấu khi chạy trên trình duyệt cũng như bot tìm kiếm. Bạn vào thẻ HEAD của HTML và viết như sau:
1
2
3
4
5
6
7
<!--
// Cách viết 1
<meta http-equiv="refresh" content="number">
// Cách viết 2
<meta http-equiv="refresh" content="number;url=dia-chi-website">
-->
Ví dụ bạn bạn muốn sau 30 giây sẽ tự động refresh lại trang bcdonline.net thì bạn có thể viết như sau:
1
2
3
<!--
<meta http-equiv="refresh" content="15;url=http://bcdonline.net">
-->
2. Thêm đoạn JavaScript đơn giản để tự động refresh
Cách này là chèn vào hay nhúng đoạn js file js vào thẻ HEAD, cách này sẽ làm dấu đi được một phần mã HTML khi thực thi, tuy nhiên cho kỳ thời gian vẫn cố định không thay đổi. Ví dụ cho phép trang web tự động load lại sau 30 giây thì bạn chèn mã như sau.
1
2
3
4
5
6
7
8
9
10
11
<!--
    <script type="text/javascript">
    init_reload();
    function init_reload(){
        setInterval( function() {
                   window.location.reload();
          },30000);
    }
    </script>
-->
Hoặc có thể viết thế nào cũng được.
1
2
3
4
5
6
7
8
<!--
<script type="text/javascript">
    function reFresh() {
      window.open(location.reload(true))
    }
    window.setInterval("reFresh()",30000);
</script>
-->
Hay cũng có thể viết cách này.
1
2
3
4
5
6
7
8
9
10
<!--
<script>
    function Refresh()
    {
        var t=setTimeout("location.reload(true)",300000);
    }
</script>
</head>
<body onload="Refresh()">
-->
3. Auto refresh random thời gian
Việc này rất tuyệt, nó sẽ tạo cho bạn một sự linh động về thời gian trong việc load lại trang web, có thể có tí gì đó dụ được bác google tăng view, tuy nhiên bạn sẽ va đập vào code một tí, tùy vào viết PHP hay ASP.Net tuy nhiên có nguyên tắc chung khởi tạo hàm random và gọi hàm vào trong các đoạn mã ở trên. ví dụ:
1
2
3
4
5
6
7
8
<!--
<script type="text/javascript">
    function reFresh() {
      window.open(location.reload(true))
    }
    window.setInterval("reFresh()",<?php echo rand(15000, 30000); ?>);
</script>
-->
Đoạn code trên cho bạn random thời gian load lại trang web giao động từ 15 giây đến 30 giây đây là hàm rand có sẳn trong thư viện PHP.
4. Tự động refresh web với trình duyệt Firefox, Google Chrome
Điều này thì làm được với máy nào có cài đặt này, sẽ là do nhu cầu của người dùng và không vì mục đích nào khác, bạn cài thêm cho firefox addon: ReloadEvery. Bằng cách vào Tool -> Add-ons và search ReloadEvery bầm vào cài đặt.
Auto refresh bằng addon ReloadEvery cho firefox
Auto refresh bằng addon ReloadEvery cho firefox
Đối với bạn nào sử dụng trình duyệt Google Chrome thì vào google.com.vn gõ từ khóa Auto Refresh chọn kết quả đầu tiên để cài auto refresh plus cho trình duyệt
Kết luận: Mong này là bài viết sẽ có ích cho các bạn. ngoài các cách ở trên bạn còn có thể sử dụng LiveJS để thực hiện điều này. Chúc các bạn thành công!
Tham khảo: http://bcdonline.net/code-auto-refresh-tu-dong-load-lai-trang-web

No comments:

Post a Comment