本教程将详细介绍如何在网页中实现一个功能：用户从下拉菜单中选择一个链接，点击“go”按钮后，该链接会在新的浏览器标签页中打开。文章将涵盖两种主要的javascript实现策略，包括直接使用window.open()方法和结合html表单的target属性，并提供详细的代码示例和注意事项，旨在帮助开发者构建用户友好的动态导航功能。
方法一：使用 JavaScript window.open() 方法直接打开新标签页
这是最直接且推荐的实现方式，它通过 JavaScript 获取下拉菜单的当前选中值（即目标URL），然后使用 window.open() 方法在新标签页中打开该URL。
实现原理
window.open(url, target, features, replace) 方法用于打开一个新的浏览器窗口或标签页。
- url: 要加载的URL。
- target: 指定在何处打开链接。_blank 表示在新标签页/窗口中打开。
- features (可选): 窗口的特性，如大小、位置等。
- replace (可选): 是否替换历史记录中的当前页面。
示例代码
首先，我们需要一个HTML结构，包含一个下拉菜单（
在新标签页打开链接
选择一个品牌：
代码解释
-
HTML 结构:
- : 一个普通按钮，当点击时会触发 goToNewPage() JavaScript 函数。
-
JavaScript 函数 goToNewPage():
- var selectElement = document.getElementById('list');: 通过 id 获取到下拉菜单元素。
- var url = selectElement.value;: 获取当前下拉菜单中选中
- if (url && url !== 'none'): 这是一个简单的验证，确保获取到的URL不是空值或预设的“无选择”值（如果存在）。
- window.open(url, '_blank').focus();: 这是核心代码。
- window.open(url, '_blank')：尝试打开一个新的浏览器标签页或窗口，并加载 url。_blank 参数是关键，它指示浏览器在新标签页中打开链接。
- .focus()：在某些浏览器中，这可以尝试将新打开的标签页设置为当前焦点。然而，由于浏览器安全策略和用户体验设置，它不总是有效，尤其是在没有用户交互（如点击）直接触发的情况下。但在用户点击按钮后触发，通常会有更好的效果。
注意事项
- 弹出窗口拦截器: 浏览器可能会将 window.open() 视为弹出窗口并进行拦截。为了最小化这种情况，确保 window.open() 是直接由用户交互（如点击按钮）触发的。
- 用户体验: 告知用户链接将在新标签页中打开，例如在按钮旁添加一个图标或文字提示。
- 错误处理: 可以添加更多的验证，例如检查URL格式是否正确。
