如何使用JavaScript關閉當前瀏覽器標籤頁?


本教程將學習如何使用JavaScript關閉瀏覽器視窗。假設使用者在兩個標籤頁中打開了您的網站,並且您不想允許這種情況,那麼您可以使用JavaScript自動關閉一個標籤頁。

此外,如果您注意到某些網路應用程式會自動開啟瀏覽器視窗來捕捉面部影像,那麼當您單擊按鈕捕捉影像時,它會自動關閉。這一切都可以使用JavaScript實現。

本教程將講解使用JavaScript關閉當前瀏覽器視窗標籤頁的不同示例。

注意 − 出於安全考慮,JavaScript不允許開發者關閉使用者開啟的視窗。因此,程式設計師只能關閉使用JavaScript的`open()`方法開啟的瀏覽器視窗。

語法

您可以按照以下語法使用`close()`方法關閉瀏覽器的視窗。

let new_window = window.open(URL, width, height);
new_window.close();

在上例語法中,我們在建立新視窗時將返回值儲存在`new_window`變數中。之後,我們使用`close()`方法關閉新開啟的視窗。

示例

在這個例子中,我們有兩個按鈕;一個是開啟新標籤頁,另一個是關閉使用JavaScript開啟的新標籤頁。

使用者需要首先透過單擊“開啟新標籤頁”按鈕來使用JavaScript開啟標籤頁。然後他們可以單擊“關閉新標籤頁”按鈕,觀察到它會自動關閉標籤頁。

<html>
<body>
   <h2>Using the <i>window.close()</i> method to close the browser's tab</h2>
   <p>Click "Open New Tab" to open a page in new tab and click "Close New Tab" to colse the opened tab</p>
   <button id = "openTab" onclick = "openTab()">Open New Tab </button><br><br>
   <button id = "closeTab" onclick = "closeTab()">Close New Tab</button>
   <script>
      // creating the variable to store the tab
      var new_tab;
      function openTab() {
         // open a new tab
         new_tab = window.open("https://tutorialspoint.tw/answers/shubham-vora");
      }
      function closeTab() {
         // close tab
         new_tab.close();
      }
   </script>
</body>
</html>

示例

在下面的示例中,我們建立了兩個按鈕,就像上面的示例一樣,用於開啟和關閉標籤頁。但是,在這個示例中,我們還在`open`方法的引數中添加了`'_blank'`,這將開啟一個新視窗而不是一個新標籤頁。

接下來,使用者可以單擊“新視窗”按鈕來關閉彈出視窗。

<html>
<body>
   <h2>Using the <i>window.close() method</i> to close the browser's window.</h2>
   <p>Click "Open New Window" to open the page in new window and click "Close New Window" to colse the opened window</p>
   <button id = "openWidnow" onclick = "openWindow()"> open new Window</button><br><br>
   <button id = "closeWidnow" onclick = "closeWindow()">Close new Window</button>
   <script>
      // creating the variable to store window
      var new_window;
      function openWindow() {
         // open a new window
         new_window = window.open("https://tutorialspoint.tw/index.htm", "_blank", "width=800");
      }
      function closeWindow() {
         // close the window
         new_window.close();
      }
   </script>
</body>
</html>

因此,使用者學習瞭如何使用JavaScript開啟新的標籤頁或視窗。還學習瞭如何使用`close()`方法關閉標籤頁或視窗。

此外,我們可以開啟新的視窗來獲取使用者輸入,當用戶提交表單資料時,我們可以在處理表單資料的函式中呼叫`close()`方法。

更新於:2023年1月19日

7000+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告