Ext.ux.IFrame无法工作：EXTJS中插入HTML代码问题求助

看起来你用错了contentEl属性的用法哦！contentEl是用来绑定已存在的DOM元素ID的，不是直接传入HTML字符串，这就是为什么你的组件没法正常工作的原因。下面给你两种靠谱的解决方案：

方案1：通过渲染事件写入HTML #

创建IFrame组件后，监听它的render事件，等组件渲染完成后直接操作iframe的文档对象写入内容：

// 先创建IFrame组件，指定渲染目标（比如页面body或者你的容器）
const iframe = Ext.create('Ext.ux.IFrame', {
    id: iframeId,
    renderTo: Ext.getBody() // 替换成你的容器ID或者组件引用
});

// 监听渲染完成事件，写入HTML
iframe.on('render', function() {
    // 用IFrame组件自带的getDoc()方法获取内部文档对象
    const iframeDoc = this.getDoc();
    if (iframeDoc) {
        iframeDoc.open();
        iframeDoc.write('<div>Test</div>'); // 这里放你的HTML内容
        iframeDoc.close();
    }
});

方案2：用autoLoad配置直接加载HTML #

如果你想在创建组件时就直接设置内容，可以用autoLoad配置，传入包含html属性的对象：

Ext.create('Ext.ux.IFrame', {
    id: iframeId,
    autoLoad: {
        html: '<div>Test</div>' // 你的HTML内容
    }
});

额外排查点 #

• 确认你已经正确引入了Ext.ux.IFrame的JS文件，没有加载失败的情况（可以看浏览器控制台的网络请求）。
• 如果用方案1，确保组件的renderTo目标是存在的DOM元素，不然组件没法渲染。
• 检查浏览器控制台有没有报错，比如跨域相关的提示（不过本地写入HTML不会触发跨域问题）。

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