如何避免DockingPanel显隐/移动时内嵌iframe外部站点重复加载？

问题根源确认 #

是的，Autodesk Viewer的DockingPanel默认行为确实是隐藏时从DOM中移除面板元素，显示时重新添加，这就导致嵌入的iframe会被销毁后重建，进而触发外部站点的重新加载。

解决方案：重写显隐逻辑 #

要改为用display:none控制显隐而非操作DOM，需要重写DockingPanel的show()和hide()方法，同时调整初始化时的DOM挂载逻辑。

具体修改步骤 #

假设你的自定义面板类继承自Autodesk.Viewing.UI.DockingPanel（比如项目中的DashboardPanel），可以按以下方式修改：

1. 初始化时提前挂载面板到DOM
   在面板构造函数中，手动将面板元素添加到Viewer容器，默认设置为隐藏，同时完成iframe的初始化：

class CustomIFramePanel extends Autodesk.Viewing.UI.DockingPanel {
    constructor(viewer, container, id, title, options) {
        super(viewer, container, id, title, options);
        
        // 手动挂载面板到DOM，跳过父类的动态添加逻辑
        this.container.appendChild(this.panelContainer);
        // 默认隐藏面板
        this.panelContainer.style.display = 'none';
        
        // 初始化iframe并添加到面板内容区
        const iframe = document.createElement('iframe');
        iframe.src = '你的外部站点URL';
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        this.content.appendChild(iframe);
    }
}

2. 重写show()方法
   跳过父类的DOM添加逻辑，仅通过修改display属性显示面板，保留事件触发逻辑：

show() {
    // 注释掉父类的show方法，避免DOM操作
    // super.show();
    
    this.panelContainer.style.display = 'block';
    // 触发面板显示事件，保证Viewer交互逻辑正常
    this.fireEvent({ type: 'shown' });
}

3. 重写hide()方法
   同样跳过父类的DOM移除逻辑，仅设置display为none，保留事件触发：

hide() {
    // 注释掉父类的hide方法
    // super.hide();
    
    this.panelContainer.style.display = 'none';
    // 触发面板隐藏事件
    this.fireEvent({ type: 'hidden' });
}

4. 处理面板移动场景
   父类的move()方法默认仅修改位置样式，不会触发DOM重建，但要确保iframe是在初始化时就添加到面板中，而非每次show时重新创建。如果移动时仍出现重加载，检查是否有其他自定义逻辑导致iframe被重复创建。

适配aps-iot-extensions-demo项目 #

找到项目中src/panels/DashboardPanel.js（或对应自定义面板文件），将上述修改逻辑应用到目标面板类即可，注意保留原面板的其他功能逻辑（比如标题栏、大小调整）。

内容的提问来源于stack exchange，提问作者すずっきー