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

javascript怎麼實現頁面跳轉

青灯夜游
發布: 2023-01-04 09:34:48
原創
56376 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板