iframeを動的に読み込みます。

Question

iframeをコンテナに動的に読み込もうとしています。 2つのボタンaとbがあり、それぞれをクリックすると異なるURLがiframeに読み込まれます。

私は試しました 1.以下のように2つの異なる容器を使用しています。 どのブラウザがクラッシュするのですか？ 2. dom.clearを使用してコンテナ内のコンテンツを切り替えることができませんでした。 3.別のxtypeの使用を検討する必要がありますか。コンテナはiframeを私が望む場所に置くからです。

Ext.define（ 'XXXXXX'、{ が伸びる 'YYYYY'、 幅： '100％' 高さ：125、 renderTo：Ext.getBody（）、 項目：[{ XTYPE。 'ラジオ・' 列：2、 幅：400、 水平：真、 名： 'キャンバス'、 アイテム：[
{ boxLabel： 'A'、 ID： 'I1' inputValueで： 'i1'、 ハンドラー：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' 

    });         
}