如何在父页初始化ROS全局对象供所有iframe调用无需重复初始化

问题原因 #

你之前的实现错误核心是ROS.init()是无返回值的静态方法，var obj = ROS.init()得到的是undefined，自然无法通过obj.ROS访问到类对象。且全局声明的ROS类本身挂载在父页面的window对象下，不需要通过返回值传递。

实现方案 #

只要父页面和所有iframe符合同源要求（协议、域名、端口完全一致），直接复用父页面全局的ROS类即可，不需要重复初始化，步骤如下：

1. 父页面逻辑 #

正常导入scripts.js，仅在父页面执行一次初始化：

// 父页面全局执行，仅执行一次
ROS.host = "你的ROS主机地址";
ROS.ws_port = 9090; // 替换为实际的rosbridge websocket端口
ROS.init();

// 父页面自身调用直接使用即可
ROS.topic_publisher("x_param", "0.1");

2. iframe页面逻辑 #

无需导入scripts.js，也无需执行初始化，直接引用父页面的ROS类即可：

直接调用写法

parent.ROS.topic_publisher("x_param", "0.1");

兼容原有代码写法

如果不想修改原有业务代码里的ROS.xxx调用，可以在iframe初始化时给全局挂载别名：

// 把父页面的ROS类挂载到iframe的全局window对象
window.ROS = parent.ROS;

// 后续调用完全和原有逻辑一致，不需要修改任何业务代码
ROS.topic_publisher("x_param", "0.1");

注意事项 #

• 必须保证父页面和所有iframe同源，否则浏览器会拦截跨域访问parent对象的操作
• 可以增加初始化状态判断，避免iframe调用时父页面还未完成ROS.init()，示例判断逻辑：

// iframe内调用前判断
function callRosPublisher(topic, msg) {
  if (parent.ROS && parent.ROS.ros) {
    parent.ROS.topic_publisher(topic, msg);
  } else {
    // 未初始化完成，100ms后重试
    setTimeout(() => callRosPublisher(topic, msg), 100);
  }
}

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