点击按钮从列表随机跳转新标签页出现about:blank问题排查

核心错误点 #

• 按钮的onclick事件直接调用无参数的window.open()，默认打开空白页，完全没触发你写的openLink函数
• openLink函数里用location.href是在当前页面跳转，不符合新标签页打开的需求
• 按钮属性错误：btn-lg btn-block属于样式类，应该放在class属性里，按钮本身不支持target属性

修复后的完整代码 #

<html lang="en">
  <head>
    <title>Redirect From List</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
  <body>
      <div style="text-align:center;padding:15px;">
        <button style="text-align:center;" onclick="openLink()" type="button" name="" id="" class="btn btn-primary btn-lg btn-block">Random Website</button>    
      </div>
    <script>
        var links = [
        "http://www.google.com",
        "http://www.yahoo.com",
        "http://www.bing.com",
        "http://www.duckduckgo.com"
    ]

    function openLink() {
        var i = parseInt(Math.random() * links.length);
        window.open(links[i], '_blank');
    }
</script>
  </body>
</html>

关键修正说明 #

1. 绑定正确事件：把onclick="window.open()"改成onclick="openLink()"，确保触发随机链接逻辑
2. 实现新标签页跳转：将location.href = links[i]替换为window.open(links[i], '_blank')，_blank参数强制在新标签页打开目标链接
3. 修正样式属性：把btn-lg btn-block移到class属性内，保证Bootstrap样式正常生效

内容的提问来源于stack exchange，提问作者Duby