首頁 雲端運算與程式碼文章正文

JS跳轉頁面代碼及例子

雲端運算與程式碼 2023年05月11日 13:33 716 訪客

JS跳轉頁面是一種很常見的前端交互技術,下面是幾種跳轉頁面的方式:

1. 直接修改 `window.location.href` 屬性,比如:

JS跳轉頁面代碼及例子 第1张

```javascript
   window.location.href = "https://sn.qunapu.com";
   ```

2. 使用 `window.location.replace` 方法,此方法會替換當前頁面歷史記錄,不會在瀏覽器歷史記錄中留下痕跡:

 ```javascript
   window.location.replace("https://sn.qunapu.com");
   ```

3. 使用 `window.open` 方法在一個新的瀏覽器窗口或標簽頁中打開一個頁面,比如:

 ```javascript
   window.open("https://sn.qunapu.com", "_blank");
   ```

   `_blank` 參數表示在一個新窗口中打開。

4. 如果你需要在某個時間間隔後自動跳轉到目標頁面,可以使用 `setTimeout` 函數,比如:

 ```javascript
   setTimeout(function() {
     window.location.href = "https://sn.qunapu.com";
   }, 5000); // 5秒後跳轉到目標頁面
   ```

常見的頁面跳轉一般是在一些條件滿足後觸發跳轉,比如表單提交成功後、某個按鈕點擊後等。以下是一個在表單提交後跳轉頁面的例子:

```javascript
// 獲取表單元素和目標URL
var form = document.getElementById("myForm");
var redirectUrl = "http://www.example.com/success.html";
// 監聽表單提交事件
form.addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止默認提交行為
  // 進行表單校驗,校驗通過則跳轉到目標頁面
  if (validateForm()) {
    window.location.href = redirectUrl;
  }
});
```

標籤: javascript JS跳轉

AmupuCopyright Amupu.Z-Blog.Some Rights Reserved.