window.moveBy()移动同源弹窗失败，遇跨源权限拒绝错误求解决

问题原因 #

1. file://协议的同源限制：直接本地打开HTML文件（file://协议）时，浏览器会将每个file://文件视为不同源，即便在同一目录，也不允许父窗口操作子窗口的moveBy/moveTo方法，触发权限错误。
2. 主线程阻塞：原代码中的while循环会一次性执行所有移动逻辑，阻塞浏览器主线程，导致窗口无法实时更新位置，甚至浏览器假死。
3. setInterval传参方式：用字符串"movewindow()"调用函数存在安全隐患，且可能引发作用域问题。

解决方案 #

1. 用HTTP服务器运行代码 #

必须通过HTTP协议访问页面，不能直接打开本地文件。可以用以下方式快速启动本地服务：

• 安装Node.js后，执行npx http-server，然后访问http://localhost:8080/你的主页面.html
• 使用VSCode的「Live Server」插件右键启动

2. 修正代码逻辑 #

以下是修复后的完整代码，解决权限问题并实现流畅的左右移动效果：

主页面代码：

var screenWidth = window.screen.width;
var currentLeft = 100; // 初始左坐标，与open参数一致
var moveDirection = 1; // 1=向右，-1=向左
var subWindow = window.open('./subwindow.html', 'movingWindow', 'top=100,left=100,width=300,height=400');

// 等待子窗口加载完成后再执行移动逻辑
function waitForSubWindowReady(callback) {
    if (subWindow && subWindow.document.readyState === 'complete') {
        callback();
    } else {
        setTimeout(() => waitForSubWindowReady(callback), 100);
    }
}

function moveWindow() {
    // 子窗口关闭则停止
    if (!subWindow || subWindow.closed) return;

    // 更新当前位置
    currentLeft += moveDirection * 5;

    // 到达屏幕边缘时切换方向
    const windowWidth = 300; // 与open参数的width一致
    if (currentLeft >= screenWidth - windowWidth) {
        moveDirection = -1;
        currentLeft = screenWidth - windowWidth;
    } else if (currentLeft <= 0) {
        moveDirection = 1;
        currentLeft = 0;
    }

    // 移动窗口
    subWindow.moveTo(currentLeft, 100);
}

// 子窗口就绪后启动移动定时器
waitForSubWindowReady(() => {
    setInterval(moveWindow, 16); // 约60帧/秒，保证流畅度
});

关键说明 #

• 同源验证：HTTP服务器下，主页面和子窗口属于同一origin（http://localhost:8080），浏览器允许父窗口操作子窗口的移动方法。
• 非阻塞移动：用setInterval逐步更新位置，避免主线程阻塞，实现可见的动画效果。
• 边界处理：计算位置时减去窗口宽度，防止窗口移出屏幕右侧；限制左边界为0，避免超出左侧。
• 窗口状态检查：每次移动前检查子窗口是否关闭，避免报错。

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