父页面发起请求获取的数据如何在popup弹出窗口中展示

你原来的代码中document.getElementById默认操作的是父页面的DOM，无法访问到新弹出的clubForm.html页面的元素，所以无法完成数据渲染。你提到的localStorage完全可以实现该需求，同时也可以直接通过窗口引用操作子页面DOM，两种方案如下：

方案1：使用localStorage实现（推荐，逻辑清晰） #

第一步：修改父页面的OpenAndSet函数 #

function OpenAndSet (xhr) {
    // 解析接口返回的俱乐部数据
    let values = Split(Object.values(Parse(xhr.responseText)));
    const clubData = {
        name: GetValue(values, 1, 'firstname'),
        adress: GetValue(values, 1, 'adresse'),
        lati: GetValue(values, 1, 'latitude'),
        longi: GetValue(values, 1, 'longitude')
    };
    // 数据转JSON字符串存入localStorage
    localStorage.setItem('currentClubInfo', JSON.stringify(clubData));
    // 打开弹出窗口
    window.open('/testpopup/Forms/clubForm.html', 'Modifier le club', 'width=500px');
}

第二步：在clubForm.html中新增数据加载逻辑 #

在clubForm.html的</body>标签前添加如下代码：

<script>
// 页面加载完成后读取localStorage数据渲染
window.addEventListener('load', () => {
    const clubInfo = JSON.parse(localStorage.getItem('currentClubInfo'));
    if (!clubInfo) return;
    // 渲染数据，用textContent代替innerHTML避免XSS风险
    document.getElementById('name').textContent = clubInfo.name;
    document.getElementById('adress').textContent = clubInfo.adress;
    document.getElementById('lati').textContent = clubInfo.lati;
    document.getElementById('longi').textContent = clubInfo.longi;
    // 可选：用完删除存储数据，避免残留旧数据
    localStorage.removeItem('currentClubInfo');
})
</script>

方案2：直接操作弹窗DOM（无需修改子页面） #

仅修改父页面的OpenAndSet函数即可：

function OpenAndSet (xhr) {
    // 打开弹窗并获取窗口实例引用
    const clubPopup = window.open('/testpopup/Forms/clubForm.html', 'Modifier le club', 'width=500px');
    let values = Split(Object.values(Parse(xhr.responseText)));
    // 监听弹窗页面加载完成后，直接操作子页面DOM渲染数据
    clubPopup.addEventListener('load', () => {
        clubPopup.document.getElementById('name').textContent = GetValue(values, 1, 'firstname');
        clubPopup.document.getElementById('adress').textContent = GetValue(values, 1, 'adresse');
        clubPopup.document.getElementById('lati').textContent = GetValue(values, 1, 'latitude');
        clubPopup.document.getElementById('longi').textContent = GetValue(values, 1, 'longitude');
    })
}

两种方案都要求父页面和clubForm.html属于同域站点，你当前同站部署的场景下两种方案都可以正常使用。

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