使用p5 Play开发老虎机时遇跨域SecurityError问题求助

这个错误是浏览器同源策略的限制导致的：preview.p5js.org作为嵌入你代码的iframe，和你的代码运行环境属于不同源，浏览器禁止它访问父窗口的add属性。

解决方案： #

• 排查代码中是否存在直接访问顶层/父窗口的逻辑：如果有window.parent.add或类似调用，立刻替换为p5.js原生API实现。比如要添加DOM元素，用createElement()、append()这类p5.js方法，不要操作父窗口。
• 本地运行项目：下载p5.js和p5.play库到本地，用本地服务器（比如VS Code Live Server）启动项目，彻底规避跨域问题。
• 检查p5.play API调用：确认setup()、draw()里的p5.play对象（比如Sprite、Group）初始化正确，不要误将库方法写成调用顶层窗口的属性。

错误代码示例及修正： #

错误写法（触发跨域）：

window.parent.add(mySprite);

修正为p5.play合法写法：

let group = new Group();
group.add(mySprite); // 使用p5.play的Group对象管理元素

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