javascript - 使用 URL 片段来确定运行哪个 jquery 函数

Question

我想链接到像 (domain.com/page#loadThickBox1) 这样的页面，并让它运行默认加载厚盒的 jquery 函数。我需要运行什么代码来完成这个？

例如，这些可能是一些链接：

domain.com/page#loadThickBox1

domain.com/page#loadThickBox2

domain.com/page#loadThickBox3

不像这样：

domain.com/page/loadThickBox1

domain.com/page/loadThickBox2

domain.com/page/loadThickBox3

Answer 1

使用 location.hash

$(function() {
    switch( location.hash.replace('#','') ){
    case 'loadThickBox1':
        //do something!
        loadThickBox1();
        break;
    case 'loadThickBox2':
        //do something!
        loadThickBox2();
        break;
    case 'loadThickBox3':
        //do something!
        loadThickBox3();
        break;
    }
});

Answer 2

location.href.split('#')[1]

这会让你得到#之后的单词。加载给定此值的适当框。

Answer 3

您可以监听hashchange事件，解析哈希并相应地运行您的函数。

演示

function handleHash(hash) {
    var hash = hash.replace('#', '');

    if (!hash) return;

    console.log('Loading thick box ' + hash.slice(-1));
}

window.addEventListener('hashchange', function () {
    handleHash(location.hash);
});

//handle initial hash when page loads
handleHash(location.hash);