如何在Wix自定义元素中实例化外部日历脚本？

问题背景 #

开发Wix应用时，原iframe版本的日历组件受沙箱机制限制，选择日期后无法完成跳转，官方建议改用自定义元素实现，但从未接触过自定义元素开发，且当前无报错信息可供调试。涉事初始化函数在iframe环境、WordPress插件中均能正常工作，为方便分享已将propertyID硬编码（正常应来自站点编辑器配置）。

相关代码 #

HTML代码 #

<bookster-wix-acw></bookster-wix-acw>

自定义元素JS代码 #

class BooksterWixACW extends HTMLElement {
  static observedAttributes = ["propertyid"];
  constructor() {
    super();
  }
  connectedCallback() {
    var widget = document.querySelector('bookster-wix-acw');
    // var propertyID = widget.getAttribute('propertyid');
    var propertyID = '32246';
    // console.log('connectedCallback: 属性ID为 '+propertyID);
    const createWidgetContainer = () => {
      const widgetContainer = document.createElement("div");
      widgetContainer.id = "bookster-calendar-widget-" + propertyID;
      return widgetContainer;
    };
    widget.appendChild(createWidgetContainer());
    // 此函数在自定义元素内无法按预期工作
    if(propertyID != null) {
      (function (w, d, a) {
        console.log(window);
        console.log(document);
        var b = (w.bookster = w.bookster || []);
        b.push({ calendar: a });
        var h = d.getElementsByTagName('head')[0];
        var j = d.createElement('script');
        j.type = 'text/javascript';
        j.async = false;
        j.src = 'https://cdn.booksterhq.com/widgets/v1/calendar.js';
        h.appendChild(j)
      })(window, document, { id: 'bookster-calendar-widget' + propertyID, property: propertyID, syndicate: 67, theme: {} });
    };
  }
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(
      `attributeChangedCallback: ${name} 已从 ${oldValue} 变更为 ${newValue}。`
    );
    var propertyID = `${newValue}`;
    // 在attributeChangedCallback中重复执行此操作可能不妥，仅是临时方案
    (
      function (w, d, a) {
        console.log('attributeChangedCallback函数的ID为: ' + propertyID);
        var b = (w.bookster = w.bookster || []);
        b.push({ calendar: a });
        var h = d.getElementsByTagName('head')[0];
        var j = d.createElement('script');
        j.type = 'text/javascript';
        j.async = false;
        j.src = 'https://cdn.booksterhq.com/widgets/v1/calendar.js';
        h.appendChild(j)
      })(window, document, { id: 'bookster-calendar-widget' + document.querySelector('bookster-wix-acw').getAttribute('propertyid'), property: document.querySelector('bookster-wix-acw').getAttribute('propertyid'), syndicate: 67, theme: {} });
  }
}
customElements.define("bookster-wix-acw", BooksterWixACW);

问题分析与修复方案 #

核心问题点 #

1. 容器ID不匹配：创建的容器ID是bookster-calendar-widget-${propertyID}，但传入脚本的配置id少了短横线，导致脚本无法找到正确容器渲染，直接影响后续交互逻辑。
2. 脚本重复加载：connectedCallback和attributeChangedCallback都会加载calendar.js，重复初始化可能引发未知冲突。
3. 上下文隔离限制：Wix自定义元素的上下文隔离可能导致脚本跳转逻辑被沙箱拦截。

修复步骤 #

1. 修正容器ID匹配问题
   在两处脚本初始化的配置中，将id改为和容器一致的格式：

   { 
     id: 'bookster-calendar-widget-' + propertyID, 
     property: propertyID, 
     syndicate: 67, 
     theme: {} 
   }
   

2. 避免脚本重复加载
   添加静态标记判断，确保脚本仅加载一次：

   class BooksterWixACW extends HTMLElement {
     static observedAttributes = ["propertyid"];
     static isScriptLoaded = false; // 添加静态标记
     constructor() {
       super();
     }
     // ...其他方法
     // 在加载脚本前增加判断
     if (!BooksterWixACW.isScriptLoaded) {
       var j = d.createElement('script');
       j.type = 'text/javascript';
       j.async = false;
       j.src = 'https://cdn.booksterhq.com/widgets/v1/calendar.js';
       j.onload = () => {
         BooksterWixACW.isScriptLoaded = true;
       };
       h.appendChild(j)
     }
   }
   

3. 适配Wix跳转机制
   若跳转仍失效，可通过Wix官方API处理跳转，监听日历组件的自定义跳转事件后触发Wix的页面跳转：

   // 在connectedCallback中添加事件监听
   this.addEventListener('bookster-navigate', (e) => {
     // 若能访问Wix API，直接调用
     // wixWindow.to(e.detail.url);
     // 否则通过postMessage通知父页面处理
     window.parent.postMessage({ type: 'BOOKSTER_NAVIGATE', url: e.detail.url }, '*');
   });
   

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