JavaScript 弹窗（Popup Windows）

‍ 个人主页：《爱蹦跶的大A阿》

当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

在互联网时代，弹窗是一种常见的交互方式。它可以用于显示重要信息、广告、登录表单等。

弹窗的优点:

• 可以吸引用户注意
• 可以提供重要信息
• 可以提高用户参与度

弹窗的缺点:

• 可能会影响用户体验
• 可能会被用户屏蔽

本章将介绍如何使用 JavaScript 打开弹窗。我们将学习以下内容:

• 如何使用 window.open() 方法打开弹窗
• 如何设置弹窗特性
• 如何阻止弹窗

​

✨ 正文

简介

弹窗（Popup）是向用户显示其他文档的最古老的方法之一。它将打开一个具有给定URL的新窗口。大多数现代浏览器都配置为在新选项卡中打开URL，而不是单独的窗口。

使用 window.open() 打开弹窗

window.open() 方法用于打开一个新的浏览器窗口或选项卡。它接受以下参数：

• url: 要打开的文档的URL
• name: 新窗口或选项卡的名称（可选）
• features: 新窗口或选项卡的特性字符串（可选）

以下是一个使用 window.open() 打开弹窗的示例：

window.open('https://www.baidu.com', '_blank');

设置弹窗特性

features 参数是一个字符串，用于指定新窗口或选项卡的特性。每个特性由一个空格分隔。以下是一些常见的特性：

• width: 新窗口或选项卡的宽度
• height: 新窗口或选项卡的高度
• left: 新窗口或选项卡的左上角位置
• top: 新窗口或选项卡的左上角位置
• resizable: 是否允许用户调整新窗口或选项卡的大小
• scrollbars: 是否显示滚动条
• toolbar: 是否显示工具栏
• location: 是否显示地址栏
• menubar: 是否显示菜单栏
• status: 是否显示状态栏

以下是一个设置弹窗特性的示例：

window.open('https://www.baidu.com', '_blank', 'width=400,height=300,left=100,top=100');

 

阻止弹窗

如果弹窗是在用户触发的事件处理程序（如 onclick）之外调用的，大多数浏览器都会阻止此类弹窗。

以下是一个阻止弹窗的示例：

// 弹窗被阻止
window.open('https://www.baidu.com');

// 弹窗被允许
button.onclick = function() {
  window.open('https://www.baidu.com');
};

代码示例

以下是一些使用 window.open() 方法打开弹窗的代码示例：

• 打开一个新窗口，并将其定位在屏幕的中心：

  function openCenteredWindow(url, width, height) {
    var left = (screen.width - width) / 2;
    var top = (screen.height - height) / 2;
    window.open(url, '_blank', 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top);
  }
  
  openCenteredWindow('https://www.baidu.com', 400, 300);
  

• 打开一个新窗口，并将其配置为具有工具栏和滚动条：

  window.open('https://www.baidu.com', '_blank', 'toolbar=yes,scrollbars=yes');
  

• 打开一个新窗口，并将其重定向到另一个URL：

  var newWindow = window.open('https://www.baidu.com', '_blank');
  newWindow.location.href = 'https://www.google.com';
  

总结

window.open() 方法是JavaScript中打开弹窗的最常用方法。它可以用于打开新窗口或选项卡，并可以配置各种特性。

✨ 结语

        本章介绍了如何使用 JavaScript 打开弹窗。我们学习了 window.open() 方法的用法，以及如何设置弹窗特性。我们还学习了如何阻止弹窗。

练习:

• 尝试使用 window.open() 方法打开一个新窗口，并将其定位在屏幕的中心。
• 尝试使用 window.open() 方法打开一个新窗口，并将其配置为具有工具栏和滚动条。
• 尝试使用 window.open() 方法打开一个新窗口，并将其重定向到另一个URL。

​