点击ellipse元素时如何获取对应父级object对象的ID？

首先先确认下我理解的结构没错：你有多个<div id="svg_*">，每个里面嵌套了<object>标签，<object>加载了独立的SVG文档（也就是你说的#DOCUMENT），而SVG里的<ellipse>是你要点击的元素。现在你不想靠固定的window.frames索引来拿<object>的ID，想要更可靠的方式。

方案1：直接修改SVG文件（最推荐） #

如果你能控制SVG文件的代码，这是最简单直接的方法，完全不用依赖索引。利用window.frameElement这个API，它能直接获取到父页面中嵌入当前SVG的<object>元素：

在你的SVG文件里，给<ellipse>绑定点击事件，或者写个通用的处理函数：

<!-- 示例椭圆元素 -->
<ellipse cx="100" cy="100" rx="80" ry="80" fill="blue" onclick="handleEllipseClick()" />

<script type="text/javascript">
function handleEllipseClick() {
  // 获取当前SVG所在的<object>元素
  const parentObject = window.frameElement;
  if (parentObject) {
    const objectId = parentObject.id;
    console.log("拿到的<object> ID：", objectId);
    // 这里写你需要的后续逻辑
  }
}
</script>

这个方法的好处是：不管<object>在页面里的位置怎么变，都能准确找到对应的元素，完全和索引无关。

方案2：父页面绑定事件（无法修改SVG时用） #

如果没办法修改SVG文件，只能在父页面做操作，那可以给每个<object>监听加载完成事件，然后给里面的<ellipse>绑定点击事件，同时把当前<object>的ID传递进去：

// 获取页面中所有的<object>元素
const allObjects = document.querySelectorAll('object');

allObjects.forEach(obj => {
  // 监听<object>加载完成
  obj.addEventListener('load', () => {
    try {
      // 获取SVG文档对象
      const svgDocument = obj.contentDocument;
      if (!svgDocument) {
        console.warn("无法获取SVG内容，可能是加载失败或跨域");
        return;
      }
      // 获取SVG里所有的<ellipse>
      const ellipses = svgDocument.querySelectorAll('ellipse');
      ellipses.forEach(ellipse => {
        // 绑定点击事件，直接用当前obj的ID
        ellipse.addEventListener('click', () => {
          console.log("拿到的<object> ID：", obj.id);
          // 这里处理你的业务逻辑
        });
      });
    } catch (error) {
      console.error("绑定事件失败：", error);
    }
  });
});

注意事项： #

• 这个方法要求SVG文件和父页面同域，否则会因为浏览器同源策略限制，无法访问contentDocument。
• 如果有动态新增的<object>，记得在新增后重复执行这段绑定逻辑。

为什么不用索引？ #

之前用window.frames[0]这种索引的方式，完全依赖<object>在页面中的加载顺序，一旦页面结构调整（比如新增了一个<object>在前面），索引就会对应错误的元素，稳定性极差。上面的两种方法都是直接关联到对应的<object>元素，可靠性高很多。

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