Firefox分页切换时onLoad事件异常触发问题求助

这问题我之前碰到过类似的，Firefox对<object>元素的加载逻辑确实和Chrome、Edge这些主流浏览器不一样——它会提前预加载分页里所有未显示的<object>资源，导致所有onload事件一次性触发，而其他浏览器一般是等到元素进入视口或者分页被激活时才会加载对应的资源。下面给你两个可行的解决思路：

方案一：动态按需加载SVG资源（最优解） #

先把分页里的<object>换成占位元素，只在分页切换到对应页面时，再动态创建<object>并加载SVG，从根源上避免预加载问题。

1. 修改分页里的HTML结构，用占位div替代原有的<object>：

<!-- 原object替换成带标识的占位div -->
<div class="svg-placeholder" 
     data-svg="/images/svg files/Scene_01.svg" 
     data-callback-args="svg_seen1_id1,svg_seen1_id2"
     data-page-id="page1"></div>

2. 监听分页切换事件，动态创建<object>并绑定onload：

// 假设你的分页切换按钮带有data-page-id属性，指向对应分页的ID
document.querySelectorAll('.pagination-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 先隐藏所有分页，激活当前分页（根据你的分页组件逻辑调整）
    document.querySelectorAll('.pagination-page').forEach(page => page.classList.remove('active'));
    const targetPage = document.getElementById(this.dataset.pageId);
    targetPage.classList.add('active');

    // 加载当前分页里的所有SVG
    const placeholders = targetPage.querySelectorAll('.svg-placeholder');
    placeholders.forEach(placeholder => {
      // 已经加载过的SVG直接跳过
      if (placeholder.querySelector('object')) return;

      const obj = document.createElement('object');
      obj.type = 'image/svg+xml';
      obj.data = placeholder.dataset.svg;
      obj.id = `svgObject-${placeholder.dataset.pageId}`; // 保持唯一ID
      
      // 绑定onload回调，传递参数
      obj.onload = function() {
        const args = placeholder.dataset.callbackArgs.split(',');
        details(this.id, ...args);
      };

      placeholder.appendChild(obj);
    });
  });
});

这个方案不仅解决了Firefox的预加载问题，还能减少初始页面的加载带宽，提升性能。

方案二：在onload回调中判断分页状态（快速兼容） #

如果不想大改现有代码结构，可以在details函数开头加入分页状态判断，只有当前激活分页里的SVG才执行后续逻辑。

1. 给每个<object>添加所属分页的标识：

<object type="image/svg+xml" data="/images/svg files/Scene_01.svg" 
        id='svgObject' data-page="page1"
        onload="details(this.id,svg_seen1_id1,svg_seen1_id2);">

2. 修改details函数，加入分页校验：

function details(svgid,gid1,gid2,gid3,gid4,gid5,gid6) {
  // 获取当前激活的分页ID（根据你的分页组件逻辑调整，比如取带active类的分页ID）
  const activePageId = document.querySelector('.pagination-page.active').id;
  const svgElement = document.getElementById(svgid);

  // 如果当前SVG所在分页未激活，直接终止函数
  if (svgElement.dataset.page !== activePageId) return;

  // 以下是你原有的业务逻辑
  var a = document.getElementById(svgid);
  var svgDoc = a.contentDocument;
  console.log(svgDoc)
  if(svgid==svg_seen1) {
    if(document.getElementById(screen_one_filed_one).value=='') {
      svgDoc.getElementById(gid1).childNodes[0].textContent=svgDoc.getElementById(gid1).childNodes[0].textContent;
      svgDoc.getElementById(gid2).childNodes[0].textContent= svgDoc.getElementById(gid2).childNodes[0].textContent;
    } else {
      svgDoc.getElementById(gid1).childNodes[0].textContent=document.getElementById(screen_one_filed_one).value;
      svgDoc.getElementById(gid2).childNodes[0].textContent= document.getElementById(screen_one_filed_two).value;
    }
  }
}

这个方案不需要修改太多现有代码，适合快速修复问题，但还是会存在Firefox预加载SVG的情况，只是不会执行不必要的业务逻辑。

内容的提问来源于stack exchange，提问作者hruday kumar reddy