javascript - 如何在更新源链接时动态重新加载 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

只需更改srciframe 的属性就会更新它。

此外，您必须等待您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(...);