如何在 window.location.href 之后使附加功能工作？

Question

我想通过单击按钮传递值来将我的网页从一个更改为另一个，这样我就可以将值传递给另一个函数。这里有一些代码。

<button onclick="review('${num}')" class="btn btn-outline-secondary">see reviews</button>

function review(val) {
    window.location.href = '/review'
    console.log(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)
}

问题是附加功能没有改变审查功能中的任何东西（但如果它在不同的功能中它会改变......）。审查中的 console.log(val) 值在控制台上消失得如此之快，而 showReviewTable 中的值显示未定义。

如何使附加工作并成功传递值？

我曾尝试使用 window.stop。这时候，我可以在控制台的review功能中获取console.log(val)的值，但是并没有直接指向新的页面。我也尝试过使用 e.preventDefault()，但仍然没有运气。

Answer 1

只要window.location.href = ... 执行，您的代码重置都不会起作用，因为该页面将被卸载并加载一个新页面。

您需要将查询字符串添加到您要导航到的 URL，然后在该页面上，让脚本读取查询字符串并为该页面执行工作。

Answer 2

我猜你想要做的是将 num 传递给评论页面，这样你就可以看到匹配的评论。

如果是这种情况，您可以将其作为散列或在查询字符串中传递。

我的答案是将它作为哈希传递。

首先，您需要将 # 和 val 添加到 window.location.href 以将该值传递给新页面。

function review(val) {
    window.location.href = '/review#'+ val;
}

在/评论页面上获取哈希值并将其放入 val 变量中。

let val = location.hash.replace("#","");

然后使用您的代码将按钮添加到 div

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)
}