如何实现点击按钮以700×500px大小打开外部网站新窗口？

嘿，这个需求其实用JavaScript的window.open()方法就能完美解决，我来给你一步步讲清楚实现方式：

核心实现思路 #

浏览器自带的window.open() API支持自定义新窗口的尺寸、位置以及其他特性，刚好能满足你要的类似Chrome“新建窗口”的效果，还能精确控制窗口大小。

基础代码示例 #

直接给你看可运行的代码，非常简单：

<!-- 页面上的触发按钮 -->
<button onclick="openCustomSizeWindow()">打开700×500的外部窗口</button>

<script>
function openCustomSizeWindow() {
  // 替换成你要跳转的外部网站URL
  const targetUrl = 'https://example.com';
  // 定义窗口特性：宽度、高度，还可添加位置、是否允许调整大小等选项
  const windowOptions = 'width=700,height=500,left=100,top=100,resizable=yes,scrollbars=yes';
  
  // 调用open方法打开指定窗口
  window.open(targetUrl, 'CustomExternalWindow', windowOptions);
}
</script>

参数详解 #

这里给你拆解一下window.open()的三个关键参数：

• 第一个参数：目标外部网站的URL，直接替换成你需要跳转的地址即可。
• 第二个参数：窗口名称（比如上面的CustomExternalWindow），自定义一个名称就行——如果后续再次调用这个函数，会复用这个窗口；如果想每次都新建独立窗口，就换个不同的名称或者用_blank（不过_blank在部分浏览器可能会打开新标签页而非独立窗口）。
• 第三个参数：窗口特性字符串，可组合多个选项：
  • width=700和height=500：就是你需要的窗口尺寸
  • left=100和top=100：窗口在屏幕上的初始位置（距离屏幕左、顶部的像素数）
  • resizable=yes：允许用户调整窗口大小（设为no则固定尺寸）
  • scrollbars=yes：如果页面内容超出窗口大小，自动显示滚动条

进阶：让窗口居中显示 #

如果想让打开的窗口自动居中在屏幕上，只需要简单计算一下位置，修改后的代码如下：

function openCenteredWindow() {
  const targetUrl = 'https://example.com';
  const winWidth = 700;
  const winHeight = 500;
  
  // 计算屏幕居中的位置
  const leftPos = (window.screen.width - winWidth) / 2;
  const topPos = (window.screen.height - winHeight) / 2;
  
  const windowOptions = `width=${winWidth},height=${winHeight},left=${leftPos},top=${topPos},resizable=yes,scrollbars=yes`;
  window.open(targetUrl, 'CenteredCustomWindow', windowOptions);
}

注意事项 #

• 弹窗拦截问题：浏览器通常会拦截自动弹出的窗口，但如果是用户主动点击按钮触发的window.open()，被拦截的概率极低，所以一定要把这个操作绑定在用户的点击事件上，不要自动执行。
• 浏览器兼容性：主流浏览器（Chrome、Firefox、Edge等）都完美支持window.open()的这些特性，不用担心兼容性问题。

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