首頁 >web前端 >js教程 >javascript怎麼實現頁面跳轉

javascript怎麼實現頁面跳轉

青灯夜游
青灯夜游原創
2021-04-07 16:18:2756367瀏覽

js頁面跳轉法:1、使用「location.href="URL"」;2、使用「location.replace("URL")」;3、使用「location.assign("URL" )」;4、使用「window.open("URL")」。

javascript怎麼實現頁面跳轉

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

javascript實作頁面跳轉的方法:

#1、使用location.href屬性跳到其他網頁

語法:

location.href="URL";

範例:

<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
    </head> 
    <body> 
      <p>这是<i>location.href</i>方式的示例</p> 
      <button onclick="myFunc()">点击这里</button> 
        
      <!--重定向到其他网页的脚本-->   
      <script> 
         function myFunc() { 
           window.location.href="https://www.php.cn"; 
         } 
      </script> 
   </body> 
</html>

2、使用location.replace()方法跳到其他網頁

語法:

location.replace("URL");

範例:

<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
    </head> 
    <body> 
      <p>这是<i>location.replace()</i>方式的示例</p> 
      <button onclick="myFunc()">点击这里</button> 
        
      <!--重定向到其他网页的脚本-->   
      <script> 
         function myFunc() { 
          location.replace("https://www.php.cn"); 
         } 
      </script> 
   </body> 
</html>

【推薦學習:javascript進階教學

3、使用location.assign ()方法跳到其他網頁

語法:

location.assign("URL")

範例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    </head> 
    <body> 
      <p>这是<i>location.assign()</i>方式的示例</p> 
      <button onclick="myFunc()">点击这里</button> 
        
      <!--重定向到其他网页的脚本-->   
      <script> 
         function myFunc() { 
          location.assign("https://www.php.cn"); 
         } 
      </script> 
   </body> 
</html>

4、使用window.open()方法跳到其他網頁

語法:

window.open("URL");

範例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    </head> 
    <body> 
      <p>这是<i>window.open()</i>方式的示例</p> 
      <button onclick="myFunc()">点击这里</button> 
        
      <!--重定向到其他网页的脚本-->   
      <script> 
         function myFunc() { 
          window.open("https://www.php.cn"); 
         } 
      </script> 
   </body> 
</html>

更多程式相關知識,請造訪:程式設計影片! !

以上是javascript怎麼實現頁面跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn