如何在源鏈接更新時動態地重新加載iframe

Question

需要動態更新iframe的源代碼。當鏈接更新時，iframe應該自己重新加載。 谷歌不提供我的工作解決方案。 目前我試圖從父面板中刪除iframe，如果它是不活動的，並且在選項卡處於活動狀態時再次添加它。

var myIFrame = new Ext.BoxComponent({ 
autoEl:{ 
    id:'myIFramePanel', 
    tag:'iframe', 
    border:false, 
    src:'myConfiguration/getMyConfigurationPage' 
} 
}); 

myConfigurationPanel = Ext.extend(Ext.Panel, { 
id:'myConfigurationPanel', 
layout:'fit', 
frame:true, 
defaults:{autoScroll:true}, 

listeners:{ 
    deactivate:function (panel) { 
     console.info('-------DEACTIVATE TAB'); 
     panel.removeAll(); 
    }, 
    activate:function (panel) { 
     console.info('-------ACTIVATE TAB'); 
     panel.add(myIFrame); 
     var myIFramePanel = document.getElementById('myIFramePanel'); // always null 
     if (myIFramePanel) { 
      var updater = Ext.get(myIFramePanel).getUpdateManager(); 
      updater.update('newLink'); 
     } 
    } 
}, 

initComponent:function() { 
    myConfigurationPanel.superclass.initComponent.apply(this, arguments); 
} 
}); 

Answer 1

只是更改iframe的src屬性將更新它。

此外，您必須等待您的BoxComponent已經呈現爲iframe在DOM中可用。然後，只有您可以通過getElementById或同等服務訪問它。

你應該做的是添加一個方法來更改iframe src，如果它已經被渲染，或者如果元素沒有被渲染，則更改該元素的src。這樣，您可以隨時調用此方法。

var myIFrame = new Ext.BoxComponent({ 
    autoEl:{ 
     id:'myIFramePanel', 
     tag:'iframe', 
     border:false, 
     src:'myConfiguration/getMyConfigurationPage' 
    } 

    ,setSrc: function(src) { 
     if (this.rendered) { 
      // equivalent to: 
      // document.getElementById('myIFramePanel').src = src; 
      Ext.get('myIFramePanel').set({ 
       src: src 
      }); 
     } else { 
      this.autoEl.src = src; 
     } 
    } 
}); 

然後，後來：

// will always work 
myIFrame.setSrc(...);