本文介绍如何将用户输入的网址动态拼接至目标域名后，通过 window.open() 在新窗口中安全打开，替代默认的 window.location.href 页面跳转行为。
本文介绍如何将用户输入的网址动态拼接至目标域名后，通过 window.open() 在新窗口中安全打开，替代默认的 window.location.href 页面跳转行为。
在 Web 开发中，当需要基于用户输入构造 URL 并在新窗口中展示（例如预览、调试或演示场景），直接修改 window.location.href 会导致当前页面跳转，影响用户体验。此时应改用 window.open() 方法——它专为新开浏览器上下文而设计，且支持参数控制窗口特性。
以下是优化后的完整实现：
function redirectToDemo(event) {
event.preventDefault();
const urlField = document.querySelector('input[name="urlInput"]');
const websiteUrl = urlField?.value?.trim();
// 输入校验：非空且为有效字符串
if (!websiteUrl) {
alert("请输入有效的网站地址");
return false;
}
// 构造带编码参数的安全 URL
const demoUrl = `https://demo.sndrmsg.com?url=${encodeURIComponent(websiteUrl)}`;
// 在新窗口中打开（_blank 表示新标签页；可选传入窗口尺寸等参数）
const newWindow = window.open(demoUrl, "_blank");
// 可选：聚焦新窗口（提升可用性，尤其在部分浏览器中）
if (newWindow && newWindow.focus) {
newWindow.focus();
}
return false;
}
✅ 关键要点说明：
-
encodeURIComponent()必须用于用户输入值，防止特殊字符（如&,/,?, 空格）破坏 URL 结构； -
window.open(url, "_blank")是标准方式，"_blank"表示在新标签页/窗口打开（由浏览器策略决定具体形式）； - 添加
event.preventDefault()确保表单不提交或链接不跳转，保障脚本控制权； - 使用可选链操作符
?.提升健壮性，避免因 DOM 元素缺失导致脚本中断； -
window.open()返回窗口引用，可用于后续操作（如focus()），但注意现代浏览器可能拦截弹窗——需确保该操作由用户主动触发（如点击事件），否则可能被屏蔽。
⚠️ 注意事项：
- 某些浏览器（如 Chrome）对非用户手势触发的
window.open()会静默拦截，请确保函数绑定在<button onclick="redirectToDemo(event)"></button>或addEventListener('click', ...)等明确交互事件上； - 若需更严格的跨域控制或自定义窗口尺寸（如
width=800,height=600），可在第三个参数传入配置字符串，但多数现代应用推荐默认_blank以兼容移动端和隐私模式； - 后端务必对
url参数做白名单校验或重定向防护，防止开放重定向（Open Redirect）安全漏洞。
通过以上改造，即可优雅地将用户提供的网站 URL 集成进演示链接，并在新窗口中打开，兼顾功能性、安全性与用户体验。
