Laden eines iframe dynamisch.

Question

Ich versuche, einen iframe dynamisch auf einen Container zu laden. gibt es zwei Schaltflächen a und b, beim Klicken auf jede von ihnen sollte eine andere URL auf den iframe geladen werden.

Ich habe versucht- 1.Verwendung von zwei verschiedenen Containern anstelle von einem wie unten gezeigt ..während welcher Browser abstürzt. 2. Ich konnte den Inhalt innerhalb des Containers nicht mithilfe von dom.clear wechseln. 3. sollte ich einen anderen xtype verwenden? seit container positioniert den iframe genau dort, wo ich es haben wollte.

Ext.define ('xxxxxx', { erstrecken: 'yyyyy' Breite: '100%', Höhe: 125, renderTo: Ext.getBody(), Artikel: [{ xtype: 'Radiogroup', Spalten: 2, Breite: 400, horizontal: true, Name: 'Leinwand', Artikel: [
{ BoxLabel: 'a', id: 'i1', Inputvalue: 'i1', Handler: Funktion() {

      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

Ich hatte jede der iframe Objekte zu zerstören, die erstellt wurden. Dies könnte die iframe-Quelle dynamisch so lange laden, wie sie wollte.

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' 

    });         
}