在 JavaScript 中的同一視窗或標籤頁中開啟 URL

Shiv Yadav 2024年2月15日
  1. 在 JavaScript 中使用 window.open() 方法的同一視窗或標籤頁中開啟 URL
  2. 在 JavaScript 中使用 location.replace() 方法的同一視窗或標籤頁中開啟 URL
在 JavaScript 中的同一視窗或標籤頁中開啟 URL

我們將在本文中瞭解如何在同一視窗或標籤頁中開啟 URL。

在 JavaScript 中使用 window.open() 方法的同一視窗或標籤頁中開啟 URL

window.open() 方法是一種 JavaScript 預定義的視窗技術,用於在瀏覽器的同一視窗和標籤頁中開啟新標籤頁或視窗。

根據你的瀏覽器設定或 window.open() 方法中提供的引數,將開啟一個新視窗或標籤頁。

語法:

window.open(url, '_self');

如果傳遞此選項,則 URL 將替換先前輸出的 _self 值和一個新視窗將出現在同一框架中。

例子:

使用 .html 副檔名儲存程式碼並執行以下指令碼。

<html>
   <body>
      <form id="formA" runat="server">
         <div style="text-align:center; font: size 25px;">
            <label>Welcome to same page redirect</label><br><br>
            <input type="button" value="Google.Com" class="btn" id="btnn">
         </div>
      </form>
      <script type="text/javascript">
      document.getElementById("btnn").addEventListener("click", (e) =>{
      let url ="https://www.google.com/";
      window.open(url, "_self");
      })
      </script
   </body>
</html>

輸出:

在點選按鈕之前:

視窗開啟方法之前

單擊該按鈕後,它將在同一視窗的同一標籤頁中開啟一個新 URL。

視窗開啟方法之後

在 JavaScript 中使用 location.replace() 方法的同一視窗或標籤頁中開啟 URL

replace() 方法用 JavaScript 中的另一個頁面替換當前頁面。replace() 方法將當前視窗的 URL 更改為 replace() 方法中指定的 URL。

語法:

location.replace(URL);

此函式僅接受單個 URL 引數。該 URL 連結到必須替換為較早版本的另一個頁面。

此方法在同一框架中返回或開啟一個帶有新頁面 URL 的新視窗。

例子:

<!DOCTYPE html>
<html>
   <body>
      <h1>Welcome to same page redirect to different url</h1>
      <h2>The replace Property</h2>
      <button onclick="Function()">Replace document</button>
      <script>
         function Function() {
           location.replace("https://www.google.com")
         }
      </script>
   </body>
</html>

在點選按鈕之前:

之前的位置替換方法

點選按鈕後:

之後的位置替換方法

作者: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

相關文章 - JavaScript EventHandler