object标签嵌入的SVG点击调用外部JS提示函数未定义怎么解决

通过<object>标签加载的独立SVG文件运行在独立的文档上下文，和父级HTML页面的全局作用域完全隔离。SVG内部的内联事件只能访问SVG自身文档全局作用域下的变量和函数，无法直接读取父页面定义的JS函数，因此会抛出function not defined错误。

以下三种方案都可以实现JS逻辑全部放在SVG外部的需求，可根据你的项目场景选择：

• 方案1：父页面主动给SVG内部元素绑定事件（改动最小，推荐）
  先删除SVG代码中rect元素的onclick="openDialog()"内联事件，再在父页面JS中监听SVG加载完成事件，获取SVG内部DOM后直接绑定父页面的函数即可，代码示例：

  const svgObject = document.getElementById('show-sld')
  // 等待SVG资源加载完成
  svgObject.addEventListener('load', () => {
    // 获取SVG内部的文档对象
    const svgDoc = svgObject.contentDocument || svgObject.getSVGDocument()
    // 选中目标rect元素
    const targetRect = svgDoc.getElementById('some-id')
    // 绑定父页面的openDialog函数
    targetRect.addEventListener('click', openDialog)
  })
  
  function openDialog(){
    // 你的原有业务逻辑
  }
  

• 方案2：通过postMessage跨上下文通信
  如果需要保留SVG内的内联事件逻辑，可以通过postMessage实现两个隔离上下文的通信：
  首先修改SVG内的点击事件逻辑：

  <rect style="opacity:1;fill:#000000;fill-opacity:0;" id="some-id" onclick="parent.postMessage('triggerOpenDialog', '*')"/>
  

  再在父页面JS中监听消息事件触发对应函数：

  window.addEventListener('message', (e) => {
    if(e.data === 'triggerOpenDialog') {
      openDialog()
    }
  })
  
  function openDialog(){
    // 你的原有业务逻辑
  }
  

• 方案3：直接内嵌SVG代码到HTML
  如果你没有必须用object加载独立SVG文件的硬性要求，可以直接把SVG的完整代码粘贴到HTML文件中，此时SVG和HTML共享同一个全局作用域，原有内联onclick可以直接调用外部的openDialog函数，不需要额外适配代码。

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