LWR自建站点中LWC无法访问依赖window的第三方库问题

针对LWR（Build Your Own）数字体验中，启用Lightning Web Security（LWS）后LWC无法访问静态资源暴露的window.myLib的问题，以下是可行的解决方法：

• 通过LWS提供的secureWindow访问全局对象
  LWS在LWR环境中会对组件的window对象做隔离代理，控制台看到的window是顶层全局环境，而组件内直接访问的window是受限制的代理实例。可以通过window.secureWindow这个LWS内置的全局对象，直接访问顶层环境的属性：

  import { LightningElement } from 'lwc';
  import myLib from '@salesforce/resourceUrl/myLib';
  import { loadScript } from 'lightning/platformResourceLoader';
  
  export default class MyLibWrapper extends LightningElement {
      scriptLoaded = false;
  
      renderedCallback() {
          if (this.scriptLoaded) return;
          this.scriptLoaded = true;
  
          loadScript(this, myLib)
              .then(() => {
                  const targetLib = window.secureWindow.myLib;
                  if (targetLib) {
                      // 执行库的初始化或业务逻辑
                      targetLib.initialize();
                  }
              })
              .catch(err => console.error('静态资源加载失败:', err));
      }
  }
  

• 配置静态资源为全局加载
  在LWR站点的配置文件（lwr.config.json）中，将目标静态资源标记为全局可用，确保它被加载到顶层全局环境而非组件隔离域：

  {
      "resources": [
          {
              "alias": "myLib",
              "type": "script",
              "path": "$salesforce/staticResource/myLib",
              "global": true
          }
      ]
  }
  

  同时确保静态资源的缓存控制设置为Public，提升加载效率并保证全局可访问性。

• 通过宿主文档视图获取顶层window
  利用组件宿主元素的文档上下文，绕过LWS的代理限制，直接获取顶层全局window：

  loadScript(this, myLib)
      .then(() => {
          const topWindow = this.template.host.ownerDocument.defaultView;
          const myLib = topWindow.myLib;
          // 调用库方法
      })
  

• 检查LWS隔离规则与加载顺序

  1. 确认组件的meta.xml中无额外的访问限制，isExposed设置为true且已添加LWR站点的访问权限；
  2. 若LWR站点为自定义配置，检查LWS的允许列表，确保静态资源的全局属性未被拦截；
  3. 调整加载顺序，可在LWR站点的入口页面优先加载静态资源，再挂载LWC组件，避免组件渲染时库未完成初始化。

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