OpenWebGAL · xiaoxustudio · Mar 11, 2026 · Mar 12, 2026 · Mar 12, 2026 · Mar 12, 2026
diff --git a/packages/parser/src/config/scriptConfig.ts b/packages/parser/src/config/scriptConfig.ts
@@ -1,4 +1,4 @@
-import {commandType} from '../interface/sceneInterface';
+import { commandType } from '../interface/sceneInterface';
 
 export const SCRIPT_CONFIG = [
   { scriptString: 'say', scriptType: commandType.say },
@@ -31,14 +31,19 @@ export const SCRIPT_CONFIG = [
   { scriptString: 'setTextbox', scriptType: commandType.setTextbox },
   { scriptString: 'setAnimation', scriptType: commandType.setAnimation },
   { scriptString: 'playEffect', scriptType: commandType.playEffect },
-  { scriptString: 'setTempAnimation', scriptType: commandType.setTempAnimation },
+  {
+    scriptString: 'setTempAnimation',
+    scriptType: commandType.setTempAnimation,
+  },
   // comment?
   { scriptString: 'setTransform', scriptType: commandType.setTransform },
   { scriptString: 'setTransition', scriptType: commandType.setTransition },
   { scriptString: 'getUserInput', scriptType: commandType.getUserInput },
   { scriptString: 'applyStyle', scriptType: commandType.applyStyle },
   { scriptString: 'wait', scriptType: commandType.wait },
   { scriptString: 'callSteam', scriptType: commandType.callSteam },
+  { scriptString: 'createIframe', scriptType: commandType.createIframe },
+  { scriptString: 'removeIframe', scriptType: commandType.removeIframe },
 ];
 export const ADD_NEXT_ARG_LIST = [
   commandType.bgm,

diff --git a/packages/parser/src/interface/sceneInterface.ts b/packages/parser/src/interface/sceneInterface.ts
@@ -40,6 +40,8 @@ export enum commandType {
   applyStyle,
   wait,
   callSteam, // 调用Steam功能
+  createIframe, // 创建框架
+  removeIframe, // 移除框架
 }
 
 /**

diff --git a/packages/webgal/src/Core/Modules/animationFunctions.ts b/packages/webgal/src/Core/Modules/animationFunctions.ts
@@ -6,7 +6,6 @@ import { baseTransform } from '@/Core/Modules/stage/stageInterface';
 import { generateTimelineObj } from '@/Core/controller/stage/pixi/animations/timeline';
 import { WebGAL } from '@/Core/WebGAL';
 import PixiStage, { IAnimationObject } from '@/Core/controller/stage/pixi/PixiController';
-import { IUserAnimation } from './animations';
 import { pickBy } from 'lodash';
 import {
   DEFAULT_BG_IN_DURATION,

diff --git a/packages/webgal/src/Core/Modules/events.ts b/packages/webgal/src/Core/Modules/events.ts
@@ -12,6 +12,9 @@ export class Events {
   public fullscreenDbClick = formEvent('fullscreen-dbclick');
   public styleUpdate = formEvent('style-update');
   public afterStyleUpdate = formEvent('after-style-update');
+  public save = formEvent('save');
+  public load = formEvent('load');
+  public sceneChange = formEvent('scene-change');
 }
 
 const eventBus = mitt();

diff --git a/packages/webgal/src/Core/Modules/stage/stageInterface.ts b/packages/webgal/src/Core/Modules/stage/stageInterface.ts
@@ -1,5 +1,20 @@
 import { ISentence } from '@/Core/controller/scene/sceneInterface';
 import { BlinkParam, FocusParam } from '@/Core/live2DCore';
+import { CSSProperties } from 'react';
+
+export interface IIFrame {
+  id: string;
+  src: string;
+  sandbox: string;
+  width?: string;
+  height?: string;
+  style: CSSProperties;
+  isActive?: boolean;
+  wait?: boolean; // 是否等待iframe完成
+  returnValue?: string | null; // iframe返回值的变量名
+  persistentData?: Record<string, any>; // iframe的持久化数据
+  injectArgs: Record<string, any>; // iframe注入的参数，将挂载在window.webgal.params中
+}
 
 /**
  * 游戏内变量
@@ -253,6 +268,7 @@ export interface IStageState {
   isDisableTextbox: boolean;
   replacedUIlable: Record<string, string>;
   figureMetaData: figureMetaData;
+  iframes: IIFrame[];
 }
 
 /**

diff --git a/packages/webgal/src/Core/Modules/stage/stageStateManager.ts b/packages/webgal/src/Core/Modules/stage/stageStateManager.ts
@@ -8,6 +8,7 @@ import {
   IEffect,
   IFigureMetadata,
   IFreeFigure,
+  IIFrame,
   ILive2DBlink,
   ILive2DExpression,
   ILive2DFocus,
@@ -78,6 +79,7 @@ export const initState: IStageState = {
   isDisableTextbox: false,
   replacedUIlable: {},
   figureMetaData: {},
+  iframes: [],
 };
 
 /**
@@ -344,14 +346,51 @@ export class StageStateManager {
   }
 
   public clearUncommittedNonHoldPerforms() {
-    this.calculationStageState.PerformList = this.calculationStageState.PerformList.filter((perform) => perform.isHoldOn);
+    this.calculationStageState.PerformList = this.calculationStageState.PerformList.filter(
+      (perform) => perform.isHoldOn,
+    );
   }
 
   public removeNonHoldPerformsAndCommit() {
     this.clearUncommittedNonHoldPerforms();
     this.commit();
   }
 
+  public addIframe(payload: IIFrame) {
+    payload.isActive = true;
+    const existing = this.calculationStageState.iframes.findIndex((e) => e.id === payload.id);
+    if (existing > -1) {
+      this.calculationStageState.iframes[existing] = payload;
+    } else {
+      this.calculationStageState.iframes.push(payload);
+    }
+    this.commit();
+  }
+
+  public removeIframe(payload: { id: string; save?: boolean }) {
+    if (payload.save) {
+      this.calculationStageState.iframes = this.calculationStageState.iframes.map((e) =>
+        e.id === payload.id ? { ...e, isActive: false } : e,
+      );
+    } else {
+      this.calculationStageState.iframes = this.calculationStageState.iframes.filter((e) => e.id !== payload.id);
+    }
+    this.commit();
+  }
+
+  public resetIframe() {
+    this.calculationStageState.iframes = [];
+    this.commit();
+  }
+
+  public updateIframePersistentData(payload: { id: string; persistentData: Record<string, any> }) {
+    const iframe = this.calculationStageState.iframes.find((e) => e.id === payload.id);
+    if (iframe) {
+      iframe.persistentData = { ...iframe.persistentData, ...payload.persistentData };
+    }
+    this.commit();
+  }
+
   public commit(options: IStageCommitOptions = {}) {
     const resolvedOptions: IResolvedStageCommitOptions = {
       syncPixiStage: options.syncPixiStage ?? true,

diff --git a/packages/webgal/src/Core/controller/gamePlay/autoPlay.ts b/packages/webgal/src/Core/controller/gamePlay/autoPlay.ts
@@ -33,6 +33,17 @@ export const stopAuto = () => {
   }
 };
 
+/**
+ * 开始自动播放
+ */
+export const startAuto = () => {
+  if (WebGAL.gameplay.autoInterval !== null) {
+    return;
+  }
+  WebGAL.gameplay.isAuto = true;
+  WebGAL.gameplay.autoInterval = setInterval(autoPlay, 100);
+};
+
 /**
  * 切换自动播放状态
  */
@@ -42,8 +53,7 @@ export const switchAuto = () => {
     stopAuto();
   } else {
     // 当前不在自动播放
-    WebGAL.gameplay.isAuto = true;
-    WebGAL.gameplay.autoInterval = setInterval(autoPlay, 100);
+    startAuto();
   }
 };
 

diff --git a/packages/webgal/src/Core/controller/gamePlay/startContinueGame.ts b/packages/webgal/src/Core/controller/gamePlay/startContinueGame.ts
@@ -34,9 +34,20 @@ export async function continueGame() {
    * 重设模糊背景
    */
   setEbg(stageStateManager.getViewStageState().bgName);
-  if ((await hasFastSaveRecord())) {
+  if (await hasFastSaveRecord()) {
     webgalStore.dispatch(setVisibility({ component: 'showTitle', visibility: false }));
     // 恢复记录
     await loadFastSaveGame();
+    return;
+  }
+  stageStateManager.resetIframe();
+  if (
+    WebGAL.sceneManager.sceneData.currentSentenceId === 0 &&
+    WebGAL.sceneManager.sceneData.currentScene.sceneName === 'start.txt'
+  ) {
+    // 如果游戏没有开始，开始游戏
+    nextSentence();
+  } else {
+    restorePerform();
   }
 }
diff --git a/packages/webgal/src/Core/controller/scene/sceneInterface.ts b/packages/webgal/src/Core/controller/scene/sceneInterface.ts
@@ -40,6 +40,8 @@ export enum commandType {
   applyStyle,
   wait,
   callSteam, // 调用Steam功能
+  createIframe, // 创建框架
+  removeIframe, // 移除框架
 }
 
 /**

diff --git a/packages/webgal/src/Core/controller/stage/resetStage.ts b/packages/webgal/src/Core/controller/stage/resetStage.ts
@@ -28,4 +28,7 @@ export const resetStage = (resetBacklog: boolean, resetSceneAndVar = true) => {
   if (!resetSceneAndVar) {
     stageStateManager.setStageAndCommit('GameVar', currentVars);
   }
+
+  // 清空frames
+  stageStateManager.resetIframe();
 };
diff --git a/packages/webgal/src/Core/controller/storage/loadGame.ts b/packages/webgal/src/Core/controller/storage/loadGame.ts
@@ -23,6 +23,7 @@ export const loadGame = (index: number) => {
   logger.debug('读取的存档数据', loadFile);
   // 加载存档
   loadGameFromStageData(loadFile);
+  WebGAL.events.load.emit(index);
 };
 
 export function loadGameFromStageData(stageData: ISaveData) {
@@ -45,6 +46,8 @@ export function loadGameFromStageData(stageData: ISaveData) {
 
   // 强制停止所有演出
   stopAllPerform();
+  // 清空frames
+  stageStateManager.resetIframe();
 
   // 恢复backlog
   const newBacklog = loadFile.backlog;
@@ -55,10 +58,21 @@ export function loadGameFromStageData(stageData: ISaveData) {
 
   // 恢复舞台状态
   const newStageState = cloneDeep(loadFile.nowStageState);
+  // 保存iframes的持久化数据
+  const iframePersistentData = new Map<string, Record<string, any>>();
+  newStageState.iframes.forEach((iframe) => {
+    if (iframe.persistentData) {
+      iframePersistentData.set(iframe.id, iframe.persistentData);
+    }
+  });
+  // iframes将被指令创建，我们不需要使用存档中的iframes
+  newStageState.iframes = [];
   // 确保原先未读的文本在 load 时能正确显示为已读文本
   newStageState.isRead = true;
   const dispatch = webgalStore.dispatch;
   stageStateManager.replaceCalculationStageState(newStageState);
+  // 将持久化数据存储到全局变量中，供后续创建iframe时使用
+  (window as any).__iframePersistentData = iframePersistentData;
 
   // 恢复演出
   setTimeout(restorePerform, 0);

diff --git a/packages/webgal/src/Core/controller/storage/saveGame.ts b/packages/webgal/src/Core/controller/storage/saveGame.ts
@@ -18,6 +18,7 @@ export const saveGame = (index: number) => {
   const saveData: ISaveData = generateCurrentStageData(index);
   webgalStore.dispatch(saveActions.saveGame({ index, saveData }));
   dumpSavesToStorage(index, index);
+  WebGAL.events.save.emit(index);
 };
 
 /**