动态加载iframe。

Question

我正在尝试将iframe动态加载到容器上。有两个按钮a和b，点击每个按钮都会有一个不同的url加载到iframe上。

我已经尝试了-1.使用两个不同的容器，而不是像below..during所示的那样，浏览器崩溃。2.我无法使用dom.clear切换容器内的内容。3.我应该考虑使用不同的xtype吗？因为容器将iframe放置在我想要的位置。

Ext.define('xxxxxx'，{ extend：'yyyyy'，宽度：'100%'，高度: 125，renderTo: Ext.getBody()，项目：[{ xtype：'radiogroup'，列: 2，宽度: 400，水平: true，名称：‘canvas’，项目：[

                     {                             boxLabel: 'a',                             id: 'i1',                             inputValue: 'i1',                             handler: function () {

                            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',       
}]

})；

Answer 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'

    });                                
}