在PHP站点中用Javascript/jQuery实现点击后在当前窗口后方打开新窗口

现代浏览器出于安全和用户体验限制，不允许JavaScript直接强制将新打开的窗口置于当前窗口后方或自动最小化，但可以通过以下变通方法实现近似效果：

原代码存在的问题 #

• 仅监听了body元素的单次点击，未覆盖所有页面元素的点击场景（比如<a>标签的默认跳转可能会干扰逻辑）
• 使用默认的window.open会直接将新窗口置于前台，无法满足后台打开的需求

修改后的实现代码 #

<?php if(!empty($directlink)){ ?>
<script type="text/javascript">
    $(document).ready(function() {
        var ec = "<?php echo $directlink; ?>";
        $("head").append('<link rel="preconnect dns-prefetch" href="' + ec + '">');
        
        // 监听页面所有点击事件，仅执行一次
        $(document).one("click", function(e) {
            // 阻止<a>标签的默认跳转行为，避免冲突
            if ($(e.target).closest("a").length) {
                e.preventDefault();
            }
            
            // 打开新窗口
            const newWindow = window.open(ec, "_blank");
            // 让原窗口重新获取焦点，间接将新窗口挤至后台
            window.focus();
        });
    });
</script>
<?php } ?>

补充说明 #

1. 后台打开的原理：通过window.focus()让原页面窗口重新获得焦点，浏览器会自动将新窗口置于后台，这是目前兼容性较好的实现方式
2. 自动最小化的限制：所有现代浏览器都禁止JavaScript脚本主动控制窗口最小化（防止恶意弹窗骚扰用户），因此无法实现自动最小化的需求
3. 兼容性：上述代码在Chrome、Firefox、Edge等主流浏览器中均可正常工作，部分旧版浏览器可能存在差异

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