如何在HTML5历史状态中存储函数

Question

因此,我使用HTML5历史记录管理来添加在具有AJAX加载的子内容的网站中前后导航的功能.

现在我想在状态对象中存储javascript函数,以便在弹出状态下进行回调.或多或少像以下代码:

$(window).bind("popstate", function(event) {
    var state = event.originalEvent.state;
    if (!state) {
        return;
    }
    state.callback(state.argument);
}

function beforeLoad() {
    var resourceId = "xyz";
    var func;

    if (case1) {
        func = switchPageToMode1;
    } else { // case 2
        func = swithPageToMode2;
    }

    func(resourceId); // run the function
    window.history.pushState({ callback: func, resourceId: resourceId }, "newTitle", "newURL"); // and push it to history
}

function switchPageToMode1(resourceId) {
    alterPageLayoutSomeWay();
    loadResource(resourceId);
}

function swithPageToMode2(resourceId) {
    alterPageLayoutSomeOtherWay();
    loadResource(resourceId);
}

function loadResource(resourceId) {
    ...
}

行.所以我要做的是存储对javascript函数的引用.但是当推送状态(实际的window.history.pushState调用)时,浏览器会提出投诉,即错误:"DATA_CLONE_ERR:DOM Exception 25"

谁知道我做错了什么？是否可以在州内存储函数调用？

Answer 1

不,这是不可能的,不是直接的.根据MDC的说法, "状态对象",即第一个参数pushState,"可以是任何可以序列化的东西".不幸的是,你无法序列化一个函数.在WHATWG规范说基本上是相同的事情,但在更多的话,要点的就是一个功能在状态对象明令禁止的.

解决方案是存储您可以使用的字符串eval或状态对象中的函数名称,例如:

$(window).bind("popstate", function(event) {
  var state = event.originalEvent.state;

  if ( !state ) { return; }

  window[ state.callback ]( state.argument );  // <-- look here
}

function beforeLoad() {
  var resourceId = "xyz",
      func
  ;

  if ( case1 ) {
    func = "switchPageToMode1";  // <-- string, not function
  } else {
    // case 2
    func = "swithPageToMode2";
  }

  window[ func ]( resourceId );  // <-- same here

  window.history.pushState(
    { callback : func,
      argument : resourceId
    },
    "newTitle", "newURL"
  );
}

当然,这是假设的switchPageToMode1并且-2处于全球背景下(即window),这不是最佳实践.如果不是,则必须以某种方式从全局环境中访问它们,例如[window.]MyAppGlobal.switchPageToMode1,在这种情况下,您可以调用它们MyAppGlobal[ func ]( argument ).