p5.js共享链接无法读取URLSearchParams，如何获取自定义参数？

问题原因 #

p5.js官方编辑器近期调整了共享预览页的结构：你访问的/full/路径页面为带顶部横幅的外层父容器，你的草图代码实际运行在该页面内嵌的同域iframe中。原代码读取的window.location是iframe的自身资源地址，不携带父页面URL的查询参数，因此返回null。

可用解决方案 #

方案1：直接读取父页面URL参数（仅适用于p5官方预览页运行场景）

父页面和内嵌草图iframe同属editor.p5js.org域，无跨域限制，直接修改代码读取父页面地址即可，改造成本最低：

let uri = new URL(window.parent.location.href);
let msg = uri.searchParams.get('m');

方案2：使用Hash参数传递（兼容性最强，支持第三方站点iframe嵌入）

如果你的草图需要嵌入到其他域名站点使用，跨域限制会导致无法读取父页面地址，推荐改用URL Hash（#后的内容）传递参数，Hash参数会自动保留在iframe地址中，不受嵌套层级和跨域限制：

1. 调整访问链接格式，把参数放在#之后：https://editor.p5js.org/psb_david_petty/full/gblbwpq7g#m=MSG
2. 修改参数读取代码：

// 移除#前缀后解析Hash参数
let hashParams = new URLSearchParams(window.location.hash.slice(1));
let msg = hashParams.get('m');

方案3：动态传参用postMessage

如果需要给嵌入的p5草图动态传递参数，可在外层嵌入页用postMessage发送参数，草图内监听消息事件接收即可：

let customMsg = '';
window.addEventListener('message', (event) => {
  // 建议增加来源校验过滤恶意消息
  if (event.origin === '你的嵌入页域名') {
    customMsg = event.data.m;
  }
});

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