javascript - 根据页面返回的 url 编辑复选框

Question

我已经为一些听起来很简单的事情苦苦挣扎了几个小时。我拥有的是一个复选框列表，如果选中一个复选框，页面 url 将更改(保存过滤器选项，以便您可以将 url 共享到过滤器)。除了用户想要返回的一点之外，它工作得很好。应取消选中复选框。

使用 jQuery

setBoxes() 是函数；

我尝试过:

function pageLoad() {
   setBoxes();
}

还有

$(document).ready(function(){
   setBoxes();
}

我还添加了

 window.onunload = function(){};

但是这些解决方案都不起作用(该函数未运行，我检查了它)。

之后我想我可以用 php 来做到这一点(如果在数组中回显检查，则获取数组的 url)，但 php 不会再次运行(我猜它已兑现)。

有什么选项我可以尝试，因为我真的无法解决这个看起来简单的问题。

因为我的代码非常大，所以我做了一个非常小的例子 http://jsfiddle.net/yzoztp05/1/根据情况，更新 jsfiddle 中的 url 被阻止，因此无法完全工作。

为了让情况更清楚，我制作了一个视频https://www.youtube.com/watch?v=jaSc1fmaJD4&feature=youtu.be .

设置复选框的代码

//convert the url to array
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

// Set the checkboxes to checked if they are in the array
function setBoxes()
{
    var prijsUrl = getQueryVariable("prijs");
    // first set all checkboxes on unchecked
    $('.prijsFilterBox').prop('checked', false);
    alert("Loaded");
    if(prijsUrl != false)
    {           
        var res = prijsUrl.split("-");

        for(var i = 0; i < res.length; i++ )
        {
            $('.prijsFilterBox[value='+res[i]+']').prop('checked', true);
            console.log("prijs = "+res[i]);
        }
    }
    else
    {
        console.log("prijs = null");
    }
}

如果我刷新页面它就可以工作，但是当用户按下后退按钮时它就不会运行。如果无法在页面后面运行 javascript，我将尝试使用 php 制作不同的脚本。

TLDR如何在页面返回(所有浏览器)上运行 jquery 函数？

Answer 1

有可能(我认为很多人都在使用这种方式)每 500 毫秒调用一次 timeOut 函数来检查 URL 是否已更改，而不是使用“？”使用哈希“#”，以便用户始终在同一页面上，并且您可以捕获 URL 更改。

如果您需要坚持“？” ，也许你可以用 window.onbeforeunload 做点什么功能。