动态加载 iframe。答案

【问题标题】：loading an iframe dynamically.动态加载 iframe。
【发布时间】：2016-05-04 14:40:02
【问题描述】：

我正在尝试将 iframe 动态加载到容器中。有两个按钮 a 和 b，单击它们中的每一个时，应将不同的 url 加载到 iframe 上。

我试过了—— 1.使用两个不同的容器而不是如下所示的一个..during 哪个浏览器崩溃。 2. 我无法使用 dom.clear 切换容器内的内容。 3. 我应该考虑使用不同的 xtype 吗？因为容器将 iframe 定位在我想要的位置。

Ext.define('xxxxxx', { 扩展：'yyyyy'，宽度：'100%'，身高：125， renderTo: Ext.getBody(), 项目： [{ xtype：'无线电组'，列：2，宽度：400，水平：真实，名称：'画布'，项目：[
{ 盒子标签：'一个'， id: 'i1', 输入值：'i1'，处理程序：函数（）{

                            var iframe = new Ext.ux.IFrame({
                                src: 'https://www.sencha.com',
                                title: 'Hello',
                                width: "100%",
                                height: 1400,
                                renderTo: 'canvas'
                            });

                        }
                    },
                    {
                        boxLabel: 'b',
                        id: 'i2',
                        inputValue: 'i2',
                        handler: function () {
                        var iframe = new Ext.ux.IFrame({
    src: 'https://www.sencha.com/web-application-lifecycle-management-sencha-platform/',
                                width: "100%",
                                height: 1400,
                                renderTo: 'canvas'
                            });                                
                        }
                    }
            ]
},
{
    xtype: 'container',
    name: 'somename',
    id: 'canvas',       
}]

});

【问题讨论】：

标签： iframe extjs5

【解决方案1】：

我不得不销毁创建的每个 iframe 对象。这可以根据需要动态加载 iframe 源代码。

handler: function () {

 if (iframe != undefined) 
   {
       iframe.destroy();
    }
var iframe = new Ext.ux.IFrame({                   

         src: 'https://www.sencha.com/web-application-lifecycle-management-sencha-platform/',
         width: "100%",
         height: 1400,
         renderTo: 'canvas'

    });                                
}

【讨论】：