根据页面背面的url编辑复选框

Edit checkboxes based on url on page back

本文关键字：url 编辑 复选框 背面      更新时间：2023-09-26

我已经为一些听起来很简单的事情挣扎了几个小时。我有一个复选框列表，如果选中复选框，页面url将更改（以保存过滤器选项，这样您就可以将url共享到过滤器）。除了一点，当用户想要返回时，它可以完美地工作。应该取消选中复选框。

使用jQuery

setBoxes（）是函数；

我试过了：

function pageLoad() {
   setBoxes();
}

和

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

我还添加了

 window.onunload = function(){};

但这些解决方案都不起作用（函数没有运行，我检查了一下）。

在那之后，我想我可能可以用php来做这件事（如果在数组中检查了echo，则获取数组的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如何在page back（所有浏览器）上运行jquery函数？

可能（我认为很多人都在使用这种方式）有一个timeOut函数，它每500ms调用一次，检查URL是否已更改，但不使用"？"使用散列'#'，这样用户总是在同一个页面上，您可以捕捉URL的更改。

如果你需要坚持"？"，也许你可以用window.onbeforeunload函数做点什么。

相关文章：