如何在Mattermost桌面端新标签页打开插件内容

要实现桌面端在新标签页打开内容、网页端保持原状态的需求，你可以通过判断运行环境并在组件中添加逻辑处理来实现：

代码修改 #

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { goBack } from 'mattermost-redux/actions/navigation';

let iframeURL = "https://codepen.io/rdesigncode/details/zYPzaqb";
const customRoute = '/myplugin';

class myplugin {
  initialize(registry, store) {
    const IframeComponent = () => {
      const dispatch = useDispatch();

      useEffect(() => {
        // 判断是否为Mattermost桌面端（Electron环境）
        if (window.mmIsElectron) {
          // 在新标签页打开iframe链接
          window.open(iframeURL, '_blank');
          // 导航回之前的页面（比如频道）
          dispatch(goBack());
        }
      }, [dispatch]);

      // 桌面端无需渲染iframe（已打开新窗口）
      if (window.mmIsElectron) {
        return null;
      }

      // 网页端正常渲染iframe
      return (
        <iframe src={iframeURL} height="100%" width="100%" title="myplugin"></iframe> 
      );
    };

    registry.registerProduct(
      customRoute,
      'kanban',
      "IFrame",
      customRoute,
      IframeComponent,
      'headerCentreComponent',
      'headerRightComponent',
      true,
      true,
      true
    );
  }
}

window.registerPlugin('myplugin', new myplugin());

关键逻辑说明 #

1. 环境判断：使用Mattermost桌面端提供的全局变量window.mmIsElectron区分桌面端和网页端。
2. 桌面端处理：
   • 组件挂载时，调用window.open在新标签页打开iframe链接。
   • 通过redux的goBack action导航回之前的页面，避免停留在空白的插件路由页面。
   • 不渲染iframe，因为内容已经在新标签页打开。
3. 网页端处理：保持原有逻辑，直接渲染iframe在当前窗口。

额外注意事项 #

• 确保插件依赖中包含mattermost-redux（Mattermost官方插件开发模板默认已包含）。
• 如果你的iframeURL需要动态生成（比如包含用户信息、团队ID等），可以从store中获取相关数据后拼接URL。

内容的提问来源于stack exchange，提问作者Udara Sampath