使用banno-plugin-framework-bridge无法新标签页打开链接及资源加载404求助

一、修复banno-plugin-framework-bridge.js 404加载失败 #

• 无需手动复制文件到静态目录，直接通过Express托管node_modules中的包资源：
  在server.js中添加以下配置，将包的dist目录映射到/js路径：

  const path = require('path');
  app.use('/js', express.static(path.join(__dirname, 'node_modules/@jack-henry/banno-plugin-framework-bridge/dist')));
  

  这样EJS里的引用/js/banno-plugin-framework-bridge.js就能直接指向node_modules中的文件，重启服务后测试即可。
• 检查路径拼写：确认__dirname指向项目根目录，路径拼接无错误，避免因路径层级问题导致的404。

二、解决弹窗被沙箱拦截问题 #

• Banno插件运行在沙箱化iframe中，直接调用原生window.open()会触发浏览器拦截，必须使用Bridge提供的官方API打开外部链接。
• 正确调用方式示例：

  <script type="module">
    import { enableRouter, openExternal } from "/js/banno-plugin-framework-bridge.js";
    enableRouter();
    
    // 给按钮绑定点击事件
    document.querySelector('.open-link-btn').addEventListener('click', () => {
      openExternal('https://xyz.com');
    });
  </script>
  

• 确保Bridge初始化完成：enableRouter()会完成与父框架的通信授权，这样弹窗请求会被沙箱允许，不会触发拦截。

三、EJS调试技巧 #

• 在EJS的script模块中添加简单日志，验证模块是否加载成功：

  import { enableRouter } from "/js/banno-plugin-framework-bridge.js";
  console.log('Bridge module loaded');
  enableRouter();
  

• 查看Chrome控制台的Network面板，检查banno-plugin-framework-bridge.js的请求状态：如果返回200则加载正常，若仍404则检查Express静态资源配置是否正确。
• 若EJS输出无日志，确认浏览器是否允许控制台输出，以及script标签的type="module"是否正确设置（ES模块需要该属性）。

内容的提问来源于stack exchange，提问作者Jared Haltrecht