实现屏幕随机位置弹出弹窗但每次位置固定的问题排查

问题原因 #

• 核心错误：window.open 的第三个窗口配置参数是纯字符串，你直接在字符串内写入的 random(0, screen.width) 不会被JS解析执行，浏览器无法识别这个非法的left属性值，会直接采用默认固定位置渲染弹窗。
• 第二个问题：代码中提前计算了垂直方向的随机值randomval，但完全没有赋值给top参数，top被写死为0，垂直位置本身就是固定的。
• 补充问题：window.open的第二个参数写为("MsgWindow", i)属于逗号运算符的错误用法，实际只会取i作为窗口名，虽不影响位置但属于不规范写法。

修复方案 #

提前计算好随机的top、left数值，再拼接进窗口配置字符串即可，推荐使用ES6模板字符串简化拼接逻辑，同时可以减去弹窗自身的宽高避免弹窗超出屏幕边界：

// 循环逻辑修复后代码
for (let i = 0; i < 13; i++) {
  // 提前计算随机位置，减去弹窗宽高避免超出屏幕
  const randomTop = random(0, screen.height - 100)
  const randomLeft = random(0, screen.width - 200)
  // 模板字符串拼接参数，窗口名规范命名
  const myWindow = window.open("", `MsgWindow${i}`, `width=200,height=100,top=${randomTop},left=${randomLeft}`);
  myWindow.document.write("<p>TROLOLOLOLOLOLOLOLOL</p>");
}

你自定义的random随机函数逻辑正常，无需修改。

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