如何从另一个HTML文档中获取指定form表单元素的长度

核心原因 #

浏览器中每个HTML页面对应独立的浏览上下文，document对象仅绑定当前页面的DOM树，因此原生DOM查询方法无法直接跨页面读取元素属性。

不同场景的实现方案 #

场景1：第二个页面以iframe形式嵌入第一个页面 #

直接访问iframe的内容文档对象即可读取元素：

<!-- 车主信息页插入隐藏iframe预加载车辆信息页 -->
<iframe id="carPageIframe" src="车辆信息页URL" style="display:none;"></iframe>

// 下一步按钮点击事件逻辑
document.getElementById('nextBtn').addEventListener('click', () => {
  const iframe = document.getElementById('carPageIframe')
  // 确保iframe加载完成后再读取
  iframe.onload = () => {
    const carForm = iframe.contentDocument.getElementById('car_info')
    console.log('form表单项长度：', carForm.length)
  }
})

场景2：两个页面为独立跳转的多页应用 #

方案A：预请求页面内容解析

点击下一步时先请求车辆信息页的HTML文本，手动解析DOM后提取属性：

document.getElementById('nextBtn').addEventListener('click', async () => {
  try {
    const res = await fetch('车辆信息页URL')
    const htmlStr = await res.text()
    // 用DOMParser解析HTML文本为DOM对象
    const parser = new DOMParser()
    const carPageDoc = parser.parseFromString(htmlStr, 'text/html')
    const carForm = carPageDoc.getElementById('car_info')
    console.log('form表单项长度：', carForm.length)
    // 拿到长度后再执行跳转等后续逻辑
    // location.href = '车辆信息页URL'
  } catch (err) {
    console.error('页面请求失败：', err)
  }
})

方案B：本地存储提前缓存属性

在车辆信息页加载时提前把form长度存入本地存储，车主信息页直接读取即可：

// 车辆信息页加载逻辑
window.addEventListener('load', () => {
  const carForm = document.getElementById('car_info')
  localStorage.setItem('car_form_length', carForm.length)
})

// 车主信息页下一步按钮逻辑
document.getElementById('nextBtn').addEventListener('click', () => {
  const formLength = localStorage.getItem('car_form_length')
  if (formLength) {
    console.log('form表单项长度：', formLength)
  } else {
    // 未缓存时的降级逻辑，比如走预请求方案
  }
})

注意：该方案依赖用户此前访问过车辆信息页，适合用户按顺序访问两个页面的业务场景

场景3：两个页面为单页应用的不同路由 #

直接将form长度存入全局状态（如Pinia、Redux）即可跨路由读取，也可以在路由跳转前预加载对应路由组件，获取组件内的form实例后读取长度。

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