js如何实现窗口跳转

使用 window.location.href 进行跳转

通过修改 window.location.href 属性实现页面跳转。这种方式会触发页面加载，并记录到浏览器的历史记录中。

window.location.href = 'https://example.com';

使用 window.location.replace 替换当前页面

window.location.replace 方法会替换当前页面，但不会在浏览器历史记录中留下记录，用户无法通过后退按钮返回前一页。

window.location.replace('https://example.com');

使用 window.open 打开新窗口或标签页

window.open 可以在新窗口或标签页中打开指定 URL。可以通过参数控制窗口特性（如大小、工具栏等）。

window.open('https://example.com', '_blank');

使用 window.location.assign 导航到新页面

与 window.location.href 类似，assign 方法会加载新页面并保留历史记录。

window.location.assign('https://example.com');

使用 HTML <a> 标签模拟跳转

通过 JavaScript 动态创建或触发 <a> 标签的点击事件，实现跳转。这种方式更符合语义化。

const link = document.createElement('a');
link.href = 'https://example.com';
link.target = '_blank';
link.click();

使用 meta 标签实现自动跳转

通过动态插入 <meta> 标签实现页面自动跳转，常用于重定向场景。

const meta = document.createElement('meta');
meta.httpEquiv = 'refresh';
meta.content = '0;url=https://example.com';
document.head.appendChild(meta);

使用 history.pushState 或 replaceState 修改 URL 但不跳转

适用于单页应用（SPA），仅修改 URL 而不触发页面刷新。需配合路由库或手动处理页面内容更新。

history.pushState({}, '', '/new-path');

注意事项

• 跨域限制：某些跳转方式可能受浏览器同源策略限制。
• 用户体验：避免滥用 window.open，可能被浏览器拦截为弹窗广告。
• SEO 影响：客户端跳转可能不利于搜索引擎抓取，建议关键路径使用服务端重定向。