bytefun/media/editor-script.js

一个打通了原型设计、UI设计与代码转换、跨平台原生代码开发等的平台

const vscode = acquireVsCodeApi();

// 事件监听器管理
const eventListeners = [];

/**
 * 添加事件监听器并记录，以便后续清理
 */
function addManagedEventListener(element, event, handler, options) {
    if (element) {
        element.addEventListener(event, handler, options);
        eventListeners.push({ element, event, handler, options });
    }
}

/**
 * 清理所有注册的事件监听器
 */
function cleanupEventListeners() {
    eventListeners.forEach(({ element, event, handler, options }) => {
        try {
            if (element && element.removeEventListener) {
                element.removeEventListener(event, handler, options);
            }
        } catch (error) {
            console.error('❌ [ByteFun Editor] 清理事件监听器失败:', error);
        }
    });
    eventListeners.length = 0; // 清空数组
}

/**
 * 页面卸载时清理资源
 */
function handlePageUnload() {
    cleanupEventListeners();
}

// 监听页面卸载事件
addManagedEventListener(window, 'beforeunload', handlePageUnload);
addManagedEventListener(window, 'unload', handlePageUnload);

function hideLoading() {
    document.getElementById('loading').style.display = 'none';
    // 通知VSCode扩展webview已准备就绪
    vscode.postMessage({
        command: 'ready'
    });
}

// 页面加载完成后设置iframe的onload事件
addManagedEventListener(document, 'DOMContentLoaded', function () {
    const iframe = document.getElementById('mainFrame');
    if (iframe) {
        iframe.onload = function () {
            hideLoading();
        };
    }
});

// 监听来自VSCode的消息
addManagedEventListener(window, 'message', function (event) {
    const message = event.data;


    // 转发消息给iframe内的页面
    const iframe = document.getElementById('mainFrame');
    if (iframe && iframe.contentWindow) {
        iframe.contentWindow.postMessage(message, '*');

    } else {

    }
});

// 监听来自iframe的消息
addManagedEventListener(window, 'message', event => {
    // 只处理来自iframe的消息，忽略来自VSCode的消息
    const iframe = document.getElementById('mainFrame');
    if (event.source !== iframe?.contentWindow) {
        return; // 不是来自iframe的消息，忽略
    }

    // 过滤来自iframe的消息
    if (event.data) {
        let messageToSend = null;

        // 处理字符串消息（如 "webview to vscode: openInVsCode 1"）
        // 尝试多种可能的消息格式
        let type = event.data.type;
        let data = event.data.data;

        if (type) {
            messageToSend = {
                type,
                data: data
            };
        } else {
            // 直接转发整个对象
            messageToSend = event.data;
        }

        // 发送消息给VSCode扩展
        if (messageToSend) {
            try {

                vscode.postMessage(messageToSend);
            } catch (error) {
                console.error('发送消息给VSCode失败:', error);
            }
        }
    }
});