使用jQuery获取当前的URL /路径名称>并检测是否有变化

时间:2016-05-02 04:35:06

标签: jquery

我想使用jQuery来检测并获取当前的URL /路径,如果它发生变化,请检测更改,然后.hide()使用jQuery的元素使用典型的jQuery .hide()方法。基本上我想只在/#/home.php页面上的任何一页上显示单页应用程序上的元素.hide()

所以,获取当前的URL。

如果当前网址不再如上所述,

.hide() div。

或者,或者:仅在当前URL为X时显示div内容。

3 个答案:

答案 0 :(得分:2)

您是否希望根据哈希值或新网址的变化采取行动?对于哈希处理:

$(window).on('hashchange', function(e){
 // handle the show/ hide of element here
})

否则,您可以使用location对象来查找URL值liek host,href等。

$(location).attr('href');

$(location).attr('pathname');

答案 1 :(得分:1)

jQuery中没有任何事件可以检测到网址的变化或任何变化。但是,我曾经遇到过这个,我使用LocalStorage来解决我的问题。这是我的代码大部分的样子。

<强> E.g。

Page 1

$(document).ready(function(){
    // Check if browser supports LocalStorage
    if(typeof(Storage) !== 'undefined') {
        var origin = document.location.origin; // e.g. "http://stackoverflow.com"
        var pathname = document.location.pathname; // e.g. "/questions/36975059/using-jquery-to-get-current-url-path-name-and-detect-if-changes"

        localStorage.setItem('origin', origin);
        localStorage.setItem('pathname', pathname);
    }
});

第2页(或者您想要检测它是否发生变化的任何地方)

$(document).ready(function(){
    // Check if browser supports LocalStorage
    if(typeof(Storage) !== 'undefined') {
        var origin = document.location.origin;
        var pathname = document.location.pathname;

        // Check if it changes here
        var storageOrigin = localStorage.getItem('origin');
        var storagePathname = localStorage.getItem('pathname');

        // Check if storageOrigin and storagePathname are not null or undefined.
        if (storageOrigin && storagePathname) {
            if (storageOrigin !== origin || storagePathname !== pathname) {
                // The previous origin and pathname are not the same. Do your things here.
            }
            else {
                // They're like the same.
            }
        }

        localStorage.setItem('origin', origin);
        localStorage.setItem('pathname', pathname);
    }
});

希望有所帮助......

答案 2 :(得分:0)

您可以使用window.location.hrefObject.prototype.watch,虽然此功能目前仅适用于Firefox Gecko(截至此答案),并且应包含Eli Grey的此实现:{{ 3}}