如何在 JavaScript 警報中顯示超連結？

我們使用jQuery UI的對話方塊 API在 JavaScript 警報中顯示超連結。JavaScript不允許在警報框中放置可點選的超連結。純 JavaScript 提供的最接近的功能是使用window.confirm()方法的確認框。

我們將使用jQuery庫在 JavaScript 警報中顯示超連結。它是一個 JavaScript 庫，用於遍歷HTML 文件以及操作它們，建立動畫等等。其中一項功能就是我們將使用的自定義對話方塊。

警報是需要使用者立即注意的訊息。警報框通常顯示某種警告，因此它有意不適合顯示可點選的超連結。可以使用另一種對話方塊來顯示超連結。

確認對話方塊顧名思義，用於在執行特定操作之前向用戶獲取確認。讓我們首先看看確認對話方塊是如何工作的。

使用window.confirm()方法

window.confirm()方法將需要在確認對話方塊中顯示的字串訊息作為引數。它根據使用者選擇的選項返回布林值。此返回值可以在條件語句中使用以執行操作。

語法

if(window.confirm(" Confirm box message ")){
   // action you want to perform
}

window.confirm()返回的布林值由 if 語句計算，然後執行或不執行操作。

示例 1

在下面的程式碼片段中，我們將建立一個嘗試複製當前選項卡的按鈕。將會彈出一個確認對話方塊，使用者必須對此進行響應。

<!DOCTYPE html>
<html>
<head>
   <title>URL of a document in JavaScript Example</title>
</head>
<body>
   <center>
      <p>This button will create a new browser tab with the same content. </p>
   </center>
   <div id = "url"></div>
   <script>
      var url = document.URL;
      document.getElementById("url").innerHTML = "URL: " + str;
      function replicateTab(){
         if(window.confirm("Are you sure you want to replicate ?")){
            window.open(url);
         }
      }
   </script>
   <center>
      <button id = "button" onclick = "replicateTab()">Click me to replicate ! </button>
   </center>
</body>
</html>

複製按鈕觸發replicateTab() JavaScript 函式，該函式建立一個確認框，根據該框，選項卡將被複制或不被複制。

使用 jQuery 在 JavaScript 警報中顯示超連結

我們將使用jQuery UI 對話方塊API 建立自定義警報框。jQuery 允許靈活地在對話方塊中放置超連結。使用 jQuery 建立的對話方塊比純 JavaScript 更具可定製性和使用者友好性。與 JavaScript 中的警報框不同，jQuery 提供的對話方塊可以移動、調整大小以及使用 CSS 進行自定義。

我們在 jQuery 中使用選擇器來使用類、id 等操作不同的 HTML 元素。選擇器是 jQuery 框架的一部分，它使導航和操作 HTML 文件變得容易。請注意，這些選擇器類似於 CSS 選擇器。

$(selector).dialog(options)

其中選擇器可以是類、id 或標籤。此行使用提供的選擇器在 jQuery 中建立一個對話方塊。jQuery 的對話方塊 API 提供了許多不同的功能，例如標題、按鈕、寬度、高度等。

使用選擇器引用文件中各種 HTML 元素的這種模式是 jQuery 的一個常見功能。我們將使用它來引用指令碼的其他部分，但由於 jQuery 新增的抽象，它與 JavaScript 的方式有所不同。

示例 2

在這裡，我們將使用 jQuery 建立一個自定義警報框並將其附加到 HTML 文件的主體。對話方塊包含一個可點選的超連結，用於複製當前選項卡。在執行任何指令碼程式碼之前，我們首先檢查 DOM（文件物件模型）是否已準備好。這是藉助 jQuery(document).ready() 函式完成的。當達到就緒狀態時，作為 ready() 內部引數提供的程式碼塊將執行。在這裡，我們將提供一個在自定義警報對話方塊中顯示可點選超連結的函式。

注意 - 我們必須透過提供相應的連結來匯入 jQuery、jQuery UI 和 jQuery UI 樣式表。

讓我們看看相同的程式碼。

<!DOCTYPE html>
<html>
<head>
   <title>Online Javascript Editor</title>
   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
   <div id="alertBox">
      <a id="myLink" target="_blank">New Tab</a>
   </div>
   <script>
      $(document).ready(function() {
         var url = document.URL;
         
         // attach the current document URL to the anchor element
         $("#myLink").attr("href", url);
         $("#alertBox").dialog({
            title: "Create duplicate tab ?",
            minWidth: 200
         });
      });
   </script>
</body>
</html>

在上面的程式碼中，我們使用 jQuery 的選擇器模式引用 HTML 文件的主體並將文件 URL 附加到<a>元素。

注意 - 警報框是對話方塊的一部分，對話方塊是一個模式視窗。這些型別的視窗在呈現時會完全獲得焦點，並且在對框執行操作之前不會關閉，從而阻止使用者與網頁互動。此類 UI 元素應僅用於重要的警報和警告。

結論

JS 中的警報框用於顯示重要訊息、警報或警告。應在適當的位置明智地使用它們以增強使用者體驗。

更新於：2022年9月21日

8K+ 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告