使用<object>引入外部HTML时JS无法获取表单单选框选中值

核心原因和事件绑定时机无关：<object>标签嵌入外部资源时，会创建独立的嵌套浏览上下文，相当于在当前页面内嵌了一个隔离的独立文档。外部HTML里的单选按钮属于这个独立文档的DOM，不属于主页面的DOM树：

• 主页面的<form>不会自动识别、收集隔离上下文内的表单项值
• 主页面执行document.getXXX类的DOM查询方法，无法直接获取到object内部的元素
  因此无论怎么调整submit事件的绑定时机，都无法直接读取到单选按钮的选中状态。

放弃使用<object>嵌入组件，改用fetch拉取外部HTML片段后直接注入主页面DOM树，注入后的元素和直接写在页面里的原生元素行为完全一致，不需要修改原有表单提交逻辑。

1. 保留主页面的容器节点，移除原来插入object标签的脚本：

<div id="search_radio"></div>

2. 编写组件加载与事件绑定逻辑，确保组件注入完成后再绑定提交事件：

document.addEventListener("DOMContentLoaded", async () => {
  // 加载外部单选组件
  const response = await fetch("radio_btn.html");
  const componentHTML = await response.text();
  // 将组件HTML直接注入主页面DOM
  document.getElementById("search_radio").innerHTML = componentHTML;
  // 组件注入完成后再绑定表单提交事件
  document.getElementById("search").addEventListener("submit", SearchIt);
});

该方案的特性：

• 无任何第三方依赖，不需要模板引擎
• 注入的单选按钮属于主页面DOM，表单原生提交会自动携带选中的参数值
• 原有SearchIt业务逻辑不需要做任何修改，和直接把单选代码写在form内的效果完全一致
• 不存在跨上下文的权限限制问题

不推荐的兼容方案（仅作参考） #

如果一定要保留<object>的引入方式，需要等待object加载完成后，通过contentDocument访问隔离上下文内的DOM手动取值，但这种方式下表单不会自动收集组件值，提交时需要手动拼接参数，且如果外部HTML和主页面不同源会触发跨域权限错误：

// 先插入object标签
document.getElementById('search_radio').innerHTML = '<object id="radio_obj" data="radio_btn.html"></object>';
const radioObj = document.getElementById('radio_obj');
radioObj.addEventListener('load', () => {
  // 等待object加载完成后访问内部DOM
  const checkedMethod = radioObj.contentDocument.querySelector('input[name="search_method"]:checked').value;
  // 提交表单时需要手动把checkedMethod追加到提交参数中
})

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