JavaScript中如何实现父窗口向子窗口传递数据？

原代码存在几处关键问题，以下是修正后的完整实现：

父窗口代码（index.html） #

<html>
<head>
</head>
<body>
    <form>
        <input type="number" name="text" id="valor" placeholder="输入移动像素数">
        <input type="button" value="打开子窗口" onClick="openWindow()">
    </form>

    <script>
        let childWindow;
        function openWindow() {
            // 获取输入框数值，转为数字（默认0避免非数字报错）
            const moveStep = parseInt(document.getElementById("valor").value) || 0;
            // 存储子窗口实例，避免覆盖全局window对象
            childWindow = window.open('child.html', 'childWindow', 'width=600,height=300');
            
            // 等待子窗口加载完成后传递数值
            childWindow.onload = function() {
                childWindow.moveStep = moveStep;
            };
        }
    </script>
</body>
</html>

子窗口代码（child.html） #

<html>
<head>
</head>
<body>
    <form>
        <input type="button" value="向左移动" onClick="moveToLeft()">
        <input type="button" value="向右移动" onClick="moveToRight()">        
    </form>
    <script>              
        // 全局变量接收父窗口传递的移动步长
        let moveStep = 0;

        function moveToLeft() {
            // moveBy相对当前位置移动，负数表示向左
            window.moveBy(-moveStep, 0);
        }
        function moveToRight() {
            // 正数表示向右移动
            window.moveBy(moveStep, 0);        
        }
    </script>
</body>
</html>

关键修改说明 #

• 输入框改为type="number"，限制仅能输入数字，避免非数值导致的逻辑错误。
• 修复输入框ID匹配错误：原代码输入框ID为valor，却错误使用getElementById("value")获取，现已修正。
• 避免覆盖全局window对象：用childWindow变量存储子窗口实例，防止污染全局作用域。
• 等待子窗口加载完成再传值：通过onload事件确保子窗口DOM加载完毕后，再传递移动步长。
• 改用moveBy方法：moveTo是设置窗口绝对位置，moveBy是相对当前位置移动，更符合"左右移动x像素"的需求。
• 子窗口定义全局变量：确保移动函数能正确访问父窗口传递的步长值。

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