ExtJS嵌入xeditor iframe与Spring Boot Rest Api交互异常求助

报错信息 #

• xeditor_core.min.js:formatted:2:8698 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'QuickTips')
• xeditor_core.min.js:formatted:2:10701 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'length')

相关代码片段 #

// 代码片段1
this.iframeDocumentBody.appendChild(this.iframeEditorContentContainer),
this.iframeBody.appendChild(this.iframeDocumentBody),
this.iframeWin.Ext.QuickTips.init(), // 此处Ext对象为null

// 代码片段2
this.iframeEl = Ext.get(this.editor.iframe), // 此处Ext对象正常存在
this.iframeWin = this.editor.iframe.contentWindow, // 此处contentWindow中无Ext对象

原因分析 #

1. iframe内未加载ExtJS脚本：原MVC应用的iframe内容中包含ExtJS的CSS/JS引入，但Spring Boot环境下iframe的HTML内容缺失这些引入，导致contentWindow中没有Ext对象。
2. 加载时机过早：代码在iframe的DOM或ExtJS脚本未完全加载完成时，就尝试访问this.iframeWin.Ext，此时Ext还未初始化。
3. 同源策略限制：若iframe内容与主页面跨域，会导致无法访问contentWindow内的Ext对象（原MVC应用为同域，无此问题）。

解决方案 #

1. 确保iframe内正确引入ExtJS资源 #

检查iframe的HTML内容，确认包含ExtJS的完整引入，路径需匹配Spring Boot的静态资源配置：

<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">
<script type="text/javascript" src="/extjs/ext-all.js"></script>

2. 等待iframe加载完成后执行初始化 #

为iframe添加load事件监听，在脚本加载完成后再访问Ext对象：

this.editor.iframe.addEventListener('load', () => {
  this.iframeWin = this.editor.iframe.contentWindow;
  if (this.iframeWin.Ext) {
    this.iframeWin.Ext.QuickTips.init();
  } else {
    console.error('iframe内未成功加载ExtJS');
  }
});

3. 验证同源策略 #

确保iframe内容与主页面同域，若需跨域，需在Spring Boot后端配置CORS，或调整iframe内容的加载方式为同域静态资源。

4. 对比iframe内容完整性 #

将Spring Boot返回的iframe HTML源码与原MVC应用的内容对比，确保所有脚本、样式引入完全一致。

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