JS跳轉頁面代碼及例子

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

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

JS跳轉頁面代碼及例子

```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;
  }
});
```

分享給朋友:

“JS跳轉頁面代碼及例子” 的相關文章

mark元素的主要功能及在HTML5 中的使用mark元素例子

mark元素的主要功能及在HTML5 中的使用mark元素例子

`<mark>` 元素的主要功能是突出顯示文本中的重要部分或關鍵字。在 HTML5 標準中,`<mark>` 元素用於標記一個文檔或一個段落中需要突出顯示的文本。一旦在 HTML 文件中使用了 `<mark>` 元素,瀏覽器通常會使用黃色背景標記該元素的文本,在頁…

html a標簽target屬性

html a標簽target屬性

HTML語言中的標簽用於定義超鏈接。其中,標簽有一個屬性叫做target,它用於指定鏈接在何處打開。目前,標簽的target屬性有以下四個取值:- _self:鏈接會在當前窗口中打開(默認值),這意味著打開新的文檔或資源時,頁面會在當前瀏覽器窗口中重新加載,並將新文檔或資源顯示在當前窗口中。基於以上…

mark元素使用紅色代表及例子

mark元素使用紅色代表及例子

在 HTML 中,<mark> 元素用於標記或突出顯示文本中的重要或關鍵內容。為了提高用戶瀏覽體驗,這些文本內容通常被渲染成鮮艷的紅色,因為紅色是視覺上最吸引人的顏色之一。 舉個例子,在一篇文章中,我們可能會用 <mark> 標記來標記一段關鍵文字,如下所示:<…

mark元素使用紅色代表及例子

mark元素使用紅色代表及例子

在HTML中,<mark> 元素可以用於標記或強調文本中的重要或關鍵內容。這個元素通常會用醒目的紅色來渲染,因為紅色是一個視覺上非常具有註意力的顏色。在這種情況下,你可以將這些關鍵字用 <mark> 標簽包圍起來,使其突出顯示。這樣可以幫助用戶更快速地發現這個型號是這個品牌的…

meter元素顏色,可以使用CSS樣式來設置顏色

meter元素顏色,可以使用CSS樣式來設置顏色

meter元素可以用於表示已知範圍內的度量值,可以使用CSS樣式來設置顏色。具體來說,可以使用 <code>::-webkit-meter-optimum-value, ::-moz-meter-bar, ::-webkit-meter-bar</code> 偽元素來設置顏色…

mark點怎麼設置及設置例子

mark點怎麼設置及設置例子

mark 元素用於標記或高亮文本,非常適合用於文本搜索和結果導航。要在文本中使用 mark 元素,只需要將需要高亮的文本放在 mark 元素內即可。通常情況下,瀏覽器默認為高亮文本設置為黃色。 .highlight {    background-color: lightblue…