如何制作一个在 HTML 中打开新窗口的按钮？ [复制]答案

【问题标题】：How to make a button that opens a new window in HTML? [duplicate]如何制作一个在 HTML 中打开新窗口的按钮？ [复制]
【发布时间】：2021-12-06 12:51:19
【问题描述】：

我正在制作一个扩展程序，我想知道如何制作一个在新窗口中打开 URL 的按钮？

这是我现在拥有的，但并不多，我只是从 HTML 开始

  <head>
     <style type="text/css">
         body {
            width: 380px;
            height: 550px;
            overflow: hidden;
            background-image: url('Background Image');    
        }
     </style>
  </head>
  <body>
    <center>
        <h1 style="color:white">Headline</h1>
    </center>
  </body>
  <body>
    <button onclick=href='https://url.com'type="button">
      Link
    </button>
    <script>
        function ClickButton() {

        }
      </script>
    </body>
</html>```

【问题讨论】：

请注意 <center> 已过时，不应使用
为什么不使用 target="_blank" 作为链接而不是按钮的属性？
重复Open URL in new window with JavaScript

标签： javascript html

【解决方案1】：

你可以使用 window.open(); https://developer.mozilla.org/en-US/docs/Web/API/Window/open

<button onClick="window.open('http://example.com', '_blank')">Open example in new tab</button>

【讨论】：

【解决方案2】：

您可以：

将<button> 编辑为<a> 并添加target 属性：
```
<a href="your-link.com" target="_blank">Link</a>
```

使您的按钮成为表单的一部分：

<form action="your-link.com" target="_blank">
  <button type="submit">Go</button>
</form>

使用 EcmaScript 打开一张新卡，使用Window.open()：
```
<button onClick="window.open('your-link.com', '_blank')">
```

【讨论】：

【解决方案3】：

您可以使用<a target='_blank' href='url/you/need'>style it like button</a>。

【讨论】：