如何实现点击按钮或链接时替换当前页面并自动打开新标签页

你可以通过JavaScript结合HTML元素来实现这个需求，以下是两种常见实现方式：

1. 按钮实现方式 #

直接在页面中添加按钮，并绑定点击事件处理逻辑：

<button id="redirectBtn">点击跳转</button>

<script>
document.getElementById('redirectBtn').addEventListener('click', function() {
    // 打开原网站的新标签页
    window.open('原网站URL', '_blank');
    // 替换当前页面为目标URL
    window.location.href = '目标跳转URL';
});
</script>

2. 链接实现方式 #

如果想用链接元素实现，需要阻止链接的默认跳转行为，再执行自定义逻辑：

<a href="#" id="redirectLink">点击跳转</a>

<script>
document.getElementById('redirectLink').addEventListener('click', function(e) {
    // 阻止链接默认跳转行为
    e.preventDefault();
    // 打开原网站的新标签页
    window.open('原网站URL', '_blank');
    // 替换当前页面为目标URL
    window.location.href = '目标跳转URL';
});
</script>

注意事项 #

• 浏览器的弹窗拦截机制可能会阻止window.open，但因为代码是在用户主动点击事件内触发，被拦截的概率极低。
• 替换代码中的原网站URL和目标跳转URL为你实际需要的地址即可。

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