点击表格行切换Object标签显示文件（PDF/其他）的JS失效问题

直接修改<object>的data属性后，浏览器不会自动重新加载新资源——这是因为object元素加载完成后不会主动监听data属性的变化，所以你看到的还是旧内容。下面给你几个可行的解决办法：

方法1：重新创建Object元素替换原有元素 #

这种方法兼容性最好，原理是直接替换整个object节点，让浏览器重新加载新资源：

function ChangeBijlage(newBijlage) {
  const oldObj = document.getElementById("CurBijl");
  const parentNode = oldObj.parentNode;
  
  // 复制旧元素的属性和 fallback 内容
  const newObj = document.createElement("object");
  newObj.id = "CurBijl";
  newObj.width = oldObj.width;
  newObj.height = oldObj.height;
  newObj.data = newBijlage;
  newObj.innerHTML = oldObj.innerHTML;
  
  // 替换旧元素
  parentNode.replaceChild(newObj, oldObj);
}

方法2：先清空data再重新赋值（部分浏览器有效） #

通过先设置空值触发浏览器刷新，再设置新的资源路径：

function ChangeBijlage(newBijlage) {
  const obj = document.getElementById("CurBijl");
  obj.setAttribute("data", "");
  // 延迟执行确保浏览器处理完清空操作
  setTimeout(() => {
    obj.setAttribute("data", newBijlage);
  }, 10);
}

方法3：改用Iframe替代Object（推荐） #

如果只是用来显示PDF、图片这类资源，<iframe>的兼容性和可操作性更好，修改src属性就能直接刷新内容：

修改后的HTML： #

<td width='50%'><iframe id='CurBijl' src='Bijlage/2023/SV13303123 back.jpg' width='100%' height='850px'><p><h1>Unable to display file</h1></p></iframe></td>

对应的JS： #

function ChangeBijlage(newBijlage) {
  document.getElementById("CurBijl").src = newBijlage;
}

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