javascript - 使用history.js，以便我可以在网站上进行深层链接

Question

我正在尝试在我的网站中进行深层链接。我的意思是我可以访问像这样的网址

http://test.madeup.com/?campaign=funkyNew

如果转到此页面，它将更改页面显示并将 funkynew 事件置于顶部。

我一直在研究history.js 的示例，并有几个问题。

所以示例代码是这样的

// Establish Variables

var History = window.History, // Note: We are using a capital H instead of a lower h
State = History.getState(),
$log = $('#log');

// Log Initial State
History.log('initial:', State.data, State.title, State.url);

// Bind to State Change
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate

       // Log the State
       var State = History.getState(); // Note: We are using History.getState() instead of event.state
       History.log('statechange:', State.data, State.title, State.url);

       alert("stateChanged - run function");
});

// Prepare Buttons
var
    buttons = document.getElementById('buttons'),
    scripts = [
        'History.pushState({state:1,rand:12345}, "Test", "?campaign=funkyNew"); '
    ],
    buttonsHTML = '';

// Add Buttons
for ( var i=0,n=scripts.length; i<n; ++i ) {
    var _script = scripts[i];
    buttonsHTML +=
        '<li><button onclick=\'javascript:'+_script+'\'>'+_script+'</button></li>';
}
buttons.innerHTML = buttonsHTML;

这可以通过单击更改 url 的按钮来实现，然后显示变量。这工作正常。

我需要做的是直接使用 funkynew 访问 url 并获取变量并让它运行函数。

显然，它现在不起作用，因为只有在按下按钮时才会创建历史记录 - 所以我怎样才能在一开始就拥有这些，以便如果我直接从另一个网址转到 funkyCampaign 即我会看到变量

这有意义吗？

感谢您的帮助

丹

Answer 1

不确定您是否找到了深层链接的方法。

下面的内容对我有用。它基本上从 url 获取参数并形成一个状态并用它替换当前(初始)状态。

// Bind to State Change
History.Adapter.bind(window,'statechange',function(){ 
   // Log the State
   var State = History.getState(); 
   History.log('statechange:', State.data, State.title, State.url);

   alert("stateChanged - run function");
});

var utils = utils || {};
utils.getParameterByName: function (name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
};

//On page load route to appropriate screen
if(urlParamSection = utils.getParameterByName('section')){
    History.replaceState({
            section: urlParamSection
        }, // This is state's data
        'MySite - ' + urlParamSection.toUpperCase(), //Title to the state
        window.location.protocol+"//"+window.location.host + "?section=" + urlParamSection // this is actually the page load url
    );
}