ExtJS中使用iframe嵌入外部页面的实现方法及渲染问题排查

方案可行性 #

• iframe是ExtJS应用嵌入外部独立页面的标准实现方案，适配绝大多数场景，尤其适合嵌入和现有ExtJS技术栈无关、不需要深度数据交互的第三方页面，没有框架层面的兼容性问题。

原有代码无法渲染的原因 #

你的代码存在4个直接导致运行失败的基础错误：

1. Ext.define第一个参数必须传入自定义组件的类名字符串，直接传入Ext.panel.Panel会覆盖框架原生的Panel类，直接触发全局组件初始化报错
2. 混淆了类定义和继承的写法，自定义组件需要通过extend配置指定继承的父类，不能直接把父类放到Ext.define的参数位
3. autoEl下配置的width、height不会被识别为iframe的有效样式，同时父面板没有设置fit布局，子组件尺寸会直接塌陷，就算iframe创建成功也看不到内容
4. src对应的URL没有加引号包裹，属于基础JS语法错误，会直接中断脚本执行

可直接运行的实现代码 #

快速嵌入写法（无需自定义类） #

不需要额外封装组件，直接在对应视图的items配置里添加即可，适合单次使用的场景：

{
    xtype: 'panel',
    title: '外部页面容器',
    layout: 'fit', // 必须配置，让iframe自动撑满整个面板区域
    width: 640,
    height: 680,
    items: [{
        xtype: 'box',
        autoEl: {
            tag: 'iframe',
            src: '替换为你要嵌入的目标页面URL',
            style: 'border: 0; width: 100%; height: 100%;',
            frameborder: '0'
        }
    }]
}

可复用组件封装写法 #

如果项目中多处需要嵌入iframe，可以封装成独立的通用面板类：

// 全局定义可复用的iframe面板类
Ext.define('App.widget.IframePanel', {
    extend: 'Ext.panel.Panel', // 继承原生Panel组件
    layout: 'fit',
    initComponent: function () {
        this.items = [{
            xtype: 'box',
            autoEl: {
                tag: 'iframe',
                src: this.iframeSrc || 'about:blank',
                style: 'border: 0; width: 100%; height: 100%;',
                frameborder: '0'
            }
        }];
        this.callParent(arguments);
    }
});

// 调用示例
Ext.create('App.widget.IframePanel', {
    renderTo: Ext.getBody(),
    iframeSrc: '替换为你要嵌入的目标页面URL',
    width: 640,
    height: 680
});

常见注意事项 #

• 受浏览器同源策略限制，如果嵌入的是跨域页面，ExtJS代码无法直接操作iframe内部的DOM和JS上下文，这是浏览器安全规则限制，和框架无关
• 部分站点会配置X-Frame-Options响应头禁止页面被第三方站点iframe嵌入，这类场景前端无法绕过，需要目标站点放开对应权限
• 如果需要和嵌入的同域页面做通信，可以通过iframe元素的contentWindow属性拿到内嵌页面的window对象实现交互

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