Tự động chuyển trang – Auto Redirect cho website

By DragonKnightMT On Th7 8, 2020

Tự động chuyển trang – Auto Redirect cho website

tu-dong-chuyen-trang-auto-redirect-banner

Hôm nay mình sẽ chia sẽ các bạn một chút kinh nghiệm trong vấn đề giải quyết việc tự động chuyển trang (Auto Redirect) đang xem tới 1 địa chỉ (URL) mà ứng dụng bạn muốn chuyển tới. Case Study ở đây là website của bạn bằng cách nào đó xử lý xong xuôi tại trang A và bây giờ bạn muốn tự động chuyển tới 1 trang B nào đó. Trang B có thể là 1 webpage của website của bạn hoặc một website khác.

Để giải quyết được vấn đề này hiện tại có 3 hướng giải quyết chính:
1.Sử dụng HTTP Status Code 301 (hoặc 302)
2.Sử dụng thẻ META của HTML
3.Sử dụng cơ chế Timeout của Javascript.

Mình sẽ lần lượt giới thiệu 3 cách triển khai cũng như ưu thế, bất lợi của từng giải pháp.

1.Sử dụng HTTP Status Code 301 (hoặc 302)

Cách này dựa trên cơ chế của HTTP, nếu trình duyệt nhận được 1 HTTP Response mà HTTP Header có Status code là 301 hoặc 302 và kèm theo “Location: some_url” thì trình duyệt sẽ tự động chuyển đến trang mà bạn chỉ định trong location.

Để làm được thao tác gởi Header theo ý mình thì tùy vào từng ngôn ngữ lập trình mà nó sẽ cung cấp cho bạn các cơ chế khác nhau để gởi header nhưng chung quy lại thì công việc cuối cùng là tạo 1 cái HTTP Response có Status code là 301 (hoặc 302).
Tại sao lại là 301 hoặc 302?
Đối với các ngôn ngữ khác thì mình chưa kiểm chứng, nhưng đối với PHP, nếu chỉ sử dụng PHP cú pháp gởi header bằng cách dùng header(“location: some_url”) thì chỉ tạo được header có status code là 302(Found) chứ không phải 301(Moved Permanently), do đó muốn nhận được status code 301 ở phía trình duyệt thì bạn cần phải gởi thêm status code trước khi gởi location. Mình nghĩ các ngôn ngữ lập trình khác cũng tương tự nhỉ ^^!

Dưới đây là danh sách cách triển khai sử dụng Header của 1 số ngôn ngữ lập trình mà mình sưu tầm được.

---------------------------------------------------------------------

PHP Redirect

 <?
 Header( "HTTP/1.1 301 Moved Permanently" );
 Header( "Location: http://www.new-url.com" );
 ?>
----------------------------------------------------------------------

ColdFusion Redirect

 <.cfheader statuscode="301" statustext="Moved permanently">

 <.cfheader name="Location" value="http://www.new-url.com">
-----------------------------------------------------------------------

ASP Redirect

 <%@ Language=VBScript %>

<%

 Response.Status="301 Moved Permanently"

 Response.AddHeader "Location","http://www.new-url.com/"

 %>

----------------------------------------------------------------------

ASP .NET Redirect

 <script runat="server">

 private void Page_Load(object sender, System.EventArgs e)

 Response.Status = "301 Moved Permanently";

 Response.AddHeader("Location","http://www.new-url.com");

 </script>

-----------------------------------------------------------------------

JSP (Java) Redirect

<%

 response.setStatus(301);

 response.setHeader( "Location", "http://www.new-url.com/" );

 response.setHeader( "Connection", "close" );

 %>

----------------------------------------------------------------------

CGI PERL Redirect

 $q = new CGI;

 print $q->redirect("http://www.new-url.com/");
----------------------------------------------------------------------

Ruby on Rails Redirect

 def old_action
 headers["Status"] = "301 Moved Permanently"
 redirect_to "http://www.new-url.com/"
 end
----------------------------------------------------------------------

Đối với cách sử dụng Header thì sẽ có 1 cái bất lợi đó là trong trường hợp bạn muốn xuất một nội dung gì đó ra rồi chuyển trang sẽ không thành công, bởi vì do cơ chế của HTTP, sau khi trình duyệt nhận được Header status code 301 (hoặc 302) và có location kèm theo thì nó sẽ tự động chuyển và bỏ qua các nội dung mà bạn xuất. Riêng đối với PHP, trước hàm header() mà bạn xuất dù chỉ 1 ký tự thì script sẽ báo lỗi và hàm header() sẽ không được thực hiện, do đó sẽ không xảy ra quá trình tự động chuyển trang. Còn các ngôn ngữ khác thì không biết giải quyết được vụ báo lỗi không ^^.

Vì giới hạn của cách thức này, nếu bạn muốn xuất một nội dung gì ra trong vòng vài giây rồi mới tự động chuyển thì chỉ có cách sử dụng 2 cách còn lại là sử dụng thẻ META của HTML hoặc sử dụng Javascript.

2.Sử dụng thẻ META của HTML

Cách này dùng rất đơn giản và tiện lợi, hiệu quả thì cực kỳ tốt. Bạn có thể cho phép trang A hiển thị bao lâu đó rồi sau đó sẽ tự động chuyển sang trang B.Chỉ cần thêm thẻ META dưới đây vào phần HEAD của trang HTML thì sẽ đạt được hiệu quả.

^?Download bloghoctap_redirect_meta.html

<html>
<head>
<meta http-equiv="refresh" content="15;url=http://www.new-url.com/">
</head>
<body>
...
</body>
</html>

Trong ví dụ này, website sẽ hiển thị 15 giây, sau đó sẽ chuyển tới trang http://www.new-url.com/. Bạn có thể thay đổi thời gian và URl bằng cách thay đổi 2 tham số trong content=”…”.

Giải pháp này được áp dụng phổ biến bởi tính Usability của nó, tuy nhiên trong 1 số trường hợp bạn không thể sử dụng thẻ META thì chỉ có cách sử dụng Javasript thông qua hàm setTimeout().

3.Sử dụng cơ chế Timeout của Javascript

Khi nghĩ tới Javascript có lẽ là lựa chọn cuối cùng của bạn rồi bởi vì dùng nó sẽ bị tốn “một xíu” tài nguyên trình duyệt và làm cho webpage chậm “một xíu”. Tuy nhiên, nếu bất khả kháng thì phải dùng thôi.

Dưới đây là 1 ví dụ đơn giản về sử dụng cơ chế Timeout để chuyển trang, hiệu quả sẽ tương tự như ví dụ ở phần sử dụng thẻ META

^?Download bloghoctap_redirect_js.html

<html>
<head>
<script type="text/javascript">
<!--
function delayer(){
    window.location = "http://www.new-url.com/"
}
//-->
</script>
</head>
<body onLoad="setTimeout('delayer()', 15000)">
<h2>Prepare to be redirected after 15 second(s)!</h2>
</body>
</html>

Tuy nhiên, khi nghĩ tới Javascript là ta có thể triển khai nhiều điều thú vị cho việc redirect, ví dụ như ngoài việc hiển thị thời gian chuyển trang, bạn có thể cho số thời gian đếm ngược(mỗi lần trừ 1 giây và hiển thị số thời gian còn lại ra), như vị ứng dụng chuyển trang trong có vẻ ấn tượng hơn. Dưới đây là đoạn Javascript cũng làm công việc như ví dụ trên, nhưng kỳ này thời gian sẽ đếm ngược và hiển thị ra màn hình.

^?Download bloghoctap_redirect_js_countdown.html

<html>
<head>
<script type="text/javascript">
var time = 15; //How long (in seconds) to countdown
var page = "http://www.new-url.com/"; //The page to redirect to
function countDown(){
time--;
gett("container").innerHTML = time;
if(time == -1){
window.location = page;
}
}
function gett(id){
if(document.getElementById) return document.getElementById(id);
if(document.all) return document.all.id;
if(document.layers) return document.layers.id;
if(window.opera) return window.opera.id;
}
function init(){
if(gett('container')){
setInterval(countDown, 1000);
gett("container").innerHTML = time;
}
else{
setTimeout(init, 50);
}
}
document.onload = init();
</SCRIPT>
</head>
<body>
<h2>Prepare to be redirected after <span id="container"></span> second(s)!</h2>
</body>
</html>

—————————————————
Tóm lại, dù cách nào đi nữa thì các bạn (những Developer) cũng hãy luôn nghĩ tới giải pháp nào tốt nhất và phục vụ tốt nhất cho user của mình. Hy vọng bài viết này sẽ giúp các bạn phần nào trên con đường “làm web” của mình ^^.