如何在 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+ 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告