如何让append函数在window.location.href跳转后生效并成功传值？

你遇到的核心问题是：执行window.location.href = '/review'后，浏览器会立刻加载新页面，当前页面的后续代码（比如append操作）根本来不及执行，而且新页面和原页面是完全独立的执行环境，原页面的变量和DOM修改无法传递到新页面。

下面是两种可行的解决思路，选一种适合你的即可：

方法一：通过URL参数传递值（最常用） #

1. 修改原页面的review函数 #

把要传递的值拼到跳转URL的参数里，不用再做DOM操作：

function review(val) {
    // 把val作为URL参数传递到新页面
    window.location.href = `/review?num=${val}`;
}

2. 在新页面（/review）的JS中处理 #

页面加载时读取URL参数，然后生成按钮并绑定函数：

// 新页面加载时执行
window.addEventListener('DOMContentLoaded', function() {
    // 获取URL中的num参数
    const urlParams = new URLSearchParams(window.location.search);
    const val = urlParams.get('num');

    // 生成按钮并添加到页面
    let temp_html = `<button onclick="showReviewTable(${val})" type="button" class="btn btn-primary">review</button>`;
    $('#make-review').append(temp_html);
});

function showReviewTable(val) {
    console.log(val);
}

方法二：用localStorage临时存储值（适合复杂数据） #

如果要传递的数据比较复杂，URL参数不够用，可以用localStorage暂存：

1. 修改原页面的review函数 #

function review(val) {
    // 把值存到localStorage
    localStorage.setItem('reviewNum', val);
    // 跳转页面
    window.location.href = '/review';
}

2. 在新页面（/review）的JS中处理 #

window.addEventListener('DOMContentLoaded', function() {
    // 从localStorage读取值
    const val = localStorage.getItem('reviewNum');
    // 用完及时删除，避免残留
    localStorage.removeItem('reviewNum');

    if (val) {
        let temp_html = `<button onclick="showReviewTable(${val})" type="button" class="btn btn-primary">review</button>`;
        $('#make-review').append(temp_html);
    }
});

function showReviewTable(val) {
    console.log(val);
}

• 你之前用window.stop或e.preventDefault()会阻止页面跳转，当然能看到日志，但违背了跳转的需求，所以不能这么用。
• URL参数适合简单的字符串/数字，复杂数据建议用localStorage或者sessionStorage（sessionStorage关闭页面就失效，更安全）。

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