组件脚本函数在保存页面后运行两次

快速解答作者 artf❤ 1

正如[这里]（https://grapesjs.com/docs/modules/Storage.html#project-data）解释的，编辑项目时不应重新导入输出HTML，只需导入JSON。

问题

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 112.0.5615.137（官方配置）（arm64）可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子组件定义：丢弃、保存和重新加载时，有两个地方调用同一个脚本。一个在保存的 HTML/JSON 里，另一个是 Grapesjs 自己添加的。如何复现这个漏洞？添加带有脚本函数的自定义组件类型。放下它并保存页面。重新加载页面时，脚本函数运行两次。预期的行为是什么？脚本函数应该只运行一次。目前的行为是什么？脚本函数运行两次。行为准则 [X] 我同意遵守本项目的行为准则

回答（2）

artf• 2023年5月8日

正如[这里]（https://grapesjs.com/docs/modules/Storage.html#project-data）解释的，编辑项目时不应重新导入输出HTML，只需导入JSON。

GJS Helper• 2026年5月17日

你遇到的组件 script 函数在保存并重新加载页面后运行两次的问题，是 GrapesJS脚本管理系统中的已知行为（或者说是个 bug，视角度而定）。这源于 GrapesJS 如何处理和序列化组件脚本，用于编辑器画布和最终导出的 HTML。根本原因解释当你在GrapesJS组件模型中定义script属性为函数时，GrapesJS执行两个主要动作导致双重执行：内联脚本嵌入： GrapesJS将脚本函数序列化成字符串，并直接嵌入组件HTML结构中的<script>标签中。这发生在组件的toHTML序列化过程中。该内联脚本通常会被包裹在setTimeout和bind调用中，以确保this指向...

在 GitHub 上查看完整讨论 →