Question

需要动态更新iframe的来源。当链接更新时，iframe应该重新加载。 Google没有向我提供有效的解决方案。目前我正在尝试从父面板中移除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已呈现，以便在DOM中提供iframe。然后，您只能使用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(...);

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

1 个答案: