[史上最全] HTML 網頁頁面轉址、自動轉址、網頁跳轉方式 - 大全


如何使用 JavaScript 或 jQuery 等方式將用戶從一個頁面重定向到另一個頁面。
以下總共整理了瀏覽器端(html, javascript, js, jqeury...)以及伺服器端(php, asp, .net, jsp)等各式轉址方式。
 

瀏覽器端轉址(client)

HTML 的 meta 方式

content 參數內可指定秒數以幾秒後要轉址的位置

HTML 轉址範例
<head>
<!--
  <meta http-equiv=refresh content="【延遲秒數】;url=【目標網址】">
-->
<meta http-equiv="refresh" content="0; url=http://blog.webgolds.com">
</head>
 
注意:要轉址的 <meta> 標籤必須放在網頁的 <head></head> 標籤之間
 
HTML 使用按鈕(button)方式按下後跳轉網頁
<input type="button" onclick="window.location = 'http://blog.webgolds.com/';">
 

jQuery 轉址

不推薦使用jQuery,使用純粹的javascript 較佳
<script>
$(function() {
      $(location).attr('href',url); 
    //window.location.href = "【目標網址】";
});
</script>
 

Javascript 轉址


1.透過 JavaScript 的 location.href 指派網址
瀏覽器不會送出 Referer 這個 HTTP Header
瀏覽器會紀錄連結的歷史紀錄 ( 好讓瀏覽器的 上一頁 、 下一頁 按鈕可以運作 )
<script>
<!--
    window.location.href = "【目標網址】";
//-->
</script>


2. 透過 JavaScript 的 location.replace 傳入網址
瀏覽器不會送出 Referer 這個 HTTP Header
瀏覽器不會紀錄連結的歷史紀錄! ( 瀏覽器將無瀏覽歷史紀錄 ),將替換頁面的當前歷史記錄,這意味著不可能使用“返回”按鈕返回到原始頁面。
<script>
<!--
    window.location.replace('【目標網址】');
//-->
</script>



3. 透過 onload 觸發轉址
<body onload="javascript:window.location.href='http://blog.webgolds.com';">


4.透過 function 方式
<script>
function goToUrl(url, sec) { 
    setTimeout('document.location =' + url, sec);
}

goToUrl('http://blog.webgolds.com', 5000); 
//5000 為延遲時間設定,單位:毫秒
</script>


 

伺服器端轉址(server)

  ​

PHP 轉址

<?php
header("Location: http://blog.webgolds.com");
?>

PHP 轉址-301 永久搬移

<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: http://blog.webgolds.com/");
?>
 

Ruby 轉址

def redir
    redirect_to "http://blog.webgolds.com/"
end

Ruby 轉址(跳轉到method)

def redir
    redirect_to :action => 'method_name'
end
 

 

Perl 轉址

#!/usr/bin/perl -w
print "Location: http://blog.webgolds.com\n\n";

Perl 轉址-301 永久搬移

#!/usr/bin/perl -w
print "Status: 301 Moved Permanently\n";
print "Location: http://blog.webgolds.com\n\n";

Perl  - 使用 CGI 模組轉址-301 永久搬移

#!/usr/bin/perl -w
use CGI qw/:standard/;
my $CGI = CGI->new();
print $CGI->redirect(
  -location => "http://blog.webgolds.com/",
  -status => 301,
);

ASP 轉址

<%
Response.Redirect "http://blog.webgolds.com"
%>

NET 轉址方式:

 
(1)Response.Redirect
Page.Response.Redirect("【目標網址】")

(2)Response.Write
Page.Response.Write("<script> location.href= ('【目標網址】'); </script> ")

(3)Response.Write 帶 script 參數
Page.Response.Write(" <script> setTimeout('location.href="【網址】"',【延遲秒數】); </script> ")
 

JAVA 轉址-Java Server Page(JSP)

(Servlet頁面跳轉)

1.間接請求轉發(Redirect)-重定向
public void goToWebgolds(HttpServletRequest request, 
                       HttpServletResponse response){
    // 請求重定向到另外的資源 
    //response.sendRedirect("資源的URL" );
    response.sendRedirect("http://blog.webgolds.com");
}




2.直接請求轉發(Forward)-客戶端瀏覽器只發出一次請求
// Servlet裡處理get請求的方法
public void doGet(HttpServletRequest request ,
                HttpServletResponse response){
    // 獲取請求轉發器對象,
      // 該轉發器的指向通過getRequestDisPatcher()的參數設置 
    RequestDispatcher requestDispatcher = 
              request.getRequestDispatcher("資源的URL");
    // 調用forward()方法,轉發請求      
    requestDispatcher.forward(request,response);    
} 

問與答

Q:window.location 跟 window.location.href 有甚麼不同?
A: 這兩個在行為方面是一樣的。window.location 會返回一個對象。如果 .href 未設置,則 window.location 默認為更改參數.href。

Q:window.location.replace 跟 window.location.href 有甚麼不同?
A: 使用 window.location.replace(...)比window.location.href 更好,因為replace()不會將起始發送頁保留在session、歷史紀錄中,這意味著使用者不會陷入永無止境的後退按鈕失敗。
  • 如果想模擬某人點擊鏈接,使用 window.location.href
  • 如果想模擬 HTTP重定向,使用 window.location.replace



頁面跳轉、刷新、重定向

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 4916
Last updated :2017-05-23