如何将Crate实例挂载到window对象以支持后续读写操作？

算力阿峰

2026-8-5

问题解决：正确挂载Crate实例到window对象

问题根源

你把外部脚本引用和自定义初始化代码放在了同一个<script>标签中，同时使用了async defer属性。浏览器解析时会直接执行标签内的代码，而此时Crate构造函数还未从外部脚本加载完成，导致new Crate执行失败，后续的window.obj挂载自然无法正常完成，最终出现undefined或“obj未定义”的错误。

正确实现方式

方案1：拆分脚本标签，确保依赖加载完成

将外部脚本引用和初始化代码分开成两个<script>标签，让Crate脚本先加载完成再执行初始化逻辑：

<script src='https://cdn.jsdelivr.net/npm/@widgetbot/crate@3' async defer></script>
<script>
// 监听DOM加载完成，确保Crate已可用
document.addEventListener('DOMContentLoaded', function() {
  window.obj = {};
  window.obj.crate = new Crate({
    css: `.embed {
            min-width: 80%;
            min-height: 80%;
            margin: 0px;   
            background-color: transparent; 
            box-shadow: none;                
          }`,
    beta: true,
    indicator: true,
    server: '', 
    channel: ''
  });
  console.log(window.obj.crate);
});
</script>

方案2：监听脚本加载事件

如果需要更精确控制脚本加载时机，可以手动创建脚本元素并监听其load事件：

<script>
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@widgetbot/crate@3';
script.onload = function() {
  window.obj = {};
  window.obj.crate = new Crate({
    css: `.embed {
            min-width: 80%;
            min-height: 80%;
            margin: 0px;   
            background-color: transparent; 
            box-shadow: none;                
          }`,
    beta: true,
    indicator: true,
    server: '', 
    channel: ''
  });
  console.log(window.obj.crate);
};
document.body.appendChild(script);
</script>