如何在HTML object标签的SVG中调用JavaScript函数及弹窗实现

我来帮你梳理一下问题根源和对应的解决方案：

一、错误原因分析 #

你遇到的两个报错本质是作用域和跨文档访问的问题：

• 'test is not a function'：因为你的test()函数定义在embed的load回调内部，属于局部作用域，SVG文档作为独立的子文档，根本访问不到这个函数。
• 'Cannot read property test of undefined'：window.mySvg只是你给object标签设的ID，并不是挂载函数的对象，而且你也没把函数挂载到SVG能访问的全局上下文里。

二、基础函数调用修复方案 #

要让SVG能触发父页面的函数，有两种可靠方式：

方案1：全局暴露函数+子文档调用 #

把函数挂载到父页面的window全局对象，然后SVG里通过parent访问父页面的全局函数：
修改HTML脚本：

<div class="container-fluid"> 
  <h1>Demo</h1> 
  <object id="mySvg" data="{{ url_for('static', filename='images/test.svg') }}" type="image/svg+xml"> 
    Browser could not render Svg 
  </object> 
  <script> 
    // 将函数暴露到全局window对象
    window.test = function() {
      console.log("accessed function");
    };

    var embed = document.getElementById("mySvg"); 
    embed.addEventListener('load', function() { 
      var svg = embed.getSVGDocument(); 
      // 可在此添加其他SVG操作逻辑
    }); 
  </script> 
</div>

修改SVG里的矩形点击事件：

<rect id="rect1" height="70" width="20" stroke="#000" y="355.6" x="307.7" stroke-width=".8833" fill="#C0C0C0" onclick="parent.test()"/>

方案2：父页面绑定SVG元素事件（更推荐） #

完全抛弃SVG内的内联onclick，在父页面的load回调里获取SVG元素并绑定事件，这种方式更符合现代前端开发规范，代码更易维护：

<div class="container-fluid"> 
  <h1>Demo</h1> 
  <object id="mySvg" data="{{ url_for('static', filename='images/test.svg') }}" type="image/svg+xml"> 
    Browser could not render Svg 
  </object> 
  <script> 
    var embed = document.getElementById("mySvg"); 
    embed.addEventListener('load', function() { 
      var svgDoc = embed.getSVGDocument();
      // 获取SVG中的矩形元素
      var rect = svgDoc.getElementById('rect1');
      // 绑定点击事件
      rect.addEventListener('click', function() {
        console.log("accessed function");
        // 这里直接写弹窗逻辑即可
      });
    }); 
  </script> 
</div>

三、jQuery结合SweetAlert实现弹窗的最佳实践 #

如果要用jQuery和SweetAlert（这里以常用的SweetAlert2为例），推荐用父页面绑定事件的方式，步骤如下：

1. 先引入依赖资源 #

在HTML的<head>里引入jQuery和SweetAlert2的资源：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- SweetAlert2 样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<!-- SweetAlert2 脚本 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

（如果是本地项目，替换为你本地的资源路径即可）

2. 绑定事件并触发弹窗 #

用jQuery监听object的load事件，获取SVG元素后绑定点击事件，直接调用SweetAlert：

<div class="container-fluid"> 
  <h1>Demo</h1> 
  <object id="mySvg" data="{{ url_for('static', filename='images/test.svg') }}" type="image/svg+xml"> 
    Browser could not render Svg 
  </object> 
  <script> 
    $(document).ready(function() {
      $('#mySvg').on('load', function() {
        // 获取SVG文档对象
        const svgDoc = this.getSVGDocument();
        // 用jQuery包装SVG内的矩形元素（指定SVG文档为上下文）
        const $rect = $(svgDoc.getElementById('rect1'));
        // 绑定点击事件
        $rect.on('click', function() {
          // 触发SweetAlert弹窗
          Swal.fire({
            title: 'SVG点击触发',
            text: '你成功触发了SweetAlert弹窗！',
            icon: 'success',
            confirmButtonText: '太棒了'
          });
        });
      });
    });
  </script> 
</div>

为什么这种方式更好？ #

• 所有逻辑集中在父页面，不需要修改SVG文件，降低维护成本
• 避免内联事件，代码结构更清晰，调试更方便
• jQuery的事件机制和SweetAlert的API可以无缝配合，开发效率更高

四、关于你SVG中的onload代码说明 #

你SVG里的onload代码是尝试通知父页面预加载当前SVG资源，逻辑是获取SVG的源地址后调用parent.preload.load(src)，如果父页面没有定义preload对象，就捕获错误不抛出。如果你的项目不需要这个预加载逻辑，可以直接移除这段代码，不会影响点击功能。

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