如何用 HTML 和 JavaScript 实现单击按钮同时打开多个网页标签页-html教程-PHP中文网

本文教你使用原生 JavaScript 的 window.open() 方法，配合 HTML 按钮，实现一次点击同时打开三个 YouTube 视频页面——适用于趣味小项目或轻量级交互需求，但需注意浏览器弹窗拦截机制。

本文教你使用原生 javascript 的 `window.open()` 方法，配合 html 按钮，实现一次点击同时打开三个 youtube 视频页面——适用于趣味小项目或轻量级交互需求，但需注意浏览器弹窗拦截机制。

在 HTML 中，一个标签只能绑定一个 href，因此你原始代码中嵌套多个标签不仅语法错误（HTML 不允许嵌套），也无法实现多链接跳转。真正可行的方案是借助 JavaScript —— 通过 window.open() 方法依次触发多个新窗口/标签页。

以下是优化后的完整、可直接运行的 HTML 示例：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载



    <meta charset="UTF-8"><title>一键开启三连笑点</title><style>
        button {
            padding: 12px 24px;
            font-size: 16px;
            background-color: #ff6b6b;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #ff5252;
        }
    </style><button onclick="openPrankLinks()">? 点击触发三连惊喜 ?</button>

    <script>
        function openPrankLinks() {
            // 注意：所有链接必须为完整 URL（含 https://），否则可能被浏览器拒绝
            const urls = [
                "https://www.youtube.com/watch?v=Kjr7US2Z9aY", // Buddy Holly - Weezer
                "https://www.youtube.com/watch?v=dQw4w9WgXcQ", // Never Gonna Give You Up
                "https://www.youtube.com/watch?v=Z3J_MCbwaJ0"  // Josh Hutcherson Whistle Meme
            ];

            urls.forEach(url => {
                window.open(url, '_blank', 'noopener,noreferrer');
            });
        }
    </script>

✅ 关键说明与注意事项：

window.open(url, '_blank', 'noopener,noreferrer') 是推荐写法：'_blank' 确保新标签页打开；noopener,noreferrer 是安全必需参数，防止新页面通过 window.opener 反向控制原页面（防范钓鱼与性能窃取）。
浏览器默认会拦截非用户主动触发的 window.open()（例如在异步回调中调用），但本例中由 onclick 直接触发，属于合法的用户手势，通常可通过。
若仍被拦截，请检查浏览器设置 → 允许当前站点弹出窗口（Chrome 地址栏右侧图标 → “网站设置” → 弹出窗口和重定向 → 设为“允许”）。
移动端 Safari 等部分浏览器对多 window.open() 支持有限（可能仅打开第一个），该功能更适合桌面端使用。

? 小贴士：这不是“ prank”的理想方式（易被识破且依赖用户环境），但作为学习 JS 与 DOM 交互的入门实践非常典型——掌握后，你还可以扩展为：带确认提示、延时打开、或根据条件动态加载不同链接。