点击Toggle Switch时打开/关闭PDF新窗口的实现问题及解决

我来帮你一步步排查问题并实现需求～首先先说说你现有代码里的几个关键问题：

• 方法名拼写错误：你写的getElementsClassName是错的，正确写法是getElementsByClassName，而且这个方法返回的是HTML元素集合，不是单个元素，不能直接绑定事件
• 没有保存PDF窗口的引用，导致关闭开关时无法定位到要关闭的窗口
• 完全缺少关闭窗口的逻辑分支

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        .switch input {
            display: none;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
        }
        input:checked + .slider {
            background-color: #2196F3;
        }
        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
    </style>
</head>
<body>
    <h2>Toggle Switch</h2>
    <label class="switch">
        <input type="checkbox"/>
        <div class="slider"></div>
    </label>

    <script type="text/javascript">
        // 全局变量保存PDF窗口引用，方便后续关闭操作
        let pdfWindow = null;
        // 直接定位到开关的checkbox元素，比操作class集合更可靠
        const switchCheckbox = document.querySelector('.switch input');
        
        switchCheckbox.addEventListener("change", function(){
            if (this.checked) {
                // 打开PDF窗口并保存实例引用
                pdfWindow = window.open("PDFS/CSS.pdf", "_blank");
                // 监听PDF窗口手动关闭事件，同步开关状态
                pdfWindow.onbeforeunload = function() {
                    switchCheckbox.checked = false;
                    pdfWindow = null;
                };
            } else {
                // 关闭PDF窗口（判断窗口存在且未被手动关闭）
                if (pdfWindow && !pdfWindow.closed) {
                    pdfWindow.close();
                    pdfWindow = null;
                }
            }
        });
    </script>
</body>
</html>

关键细节说明 #

1. 元素选择优化：用document.querySelector('.switch input')直接定位到开关的核心checkbox，避免操作元素集合的麻烦
2. 窗口引用管理：通过全局变量pdfWindow追踪打开的窗口实例，确保关闭开关时能精准操作目标窗口
3. 状态双向同步：添加onbeforeunload监听，当用户手动关闭PDF窗口时，自动把开关切回关闭状态，保持UI和实际状态一致
4. 弹窗兼容性：浏览器会拦截非用户主动触发的弹窗，这里的事件绑定在开关的点击触发事件上，属于用户主动操作，不会被拦截，但要确保PDFS/CSS.pdf的文件路径是正确的

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