更新源链接时如何动态重新加载iframe

Question

需要动态更新iframe的源。 并且当链接更新时，iframe应该重新加载自身。 Google没有为我提供有效的解决方案。 目前，我正在尝试从父面板中删除非活动的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(...);