javascript - 如何在 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 调用)时，浏览器提出投诉，即 Error: "DATA_CLONE_ERR: DOM Exception 25"

有人知道我做错了什么吗？是否可以在状态中存储函数调用？

Answer 1

不，这不可能，反正不能直接。 According to MDC “状态对象”，即 pushState 的第一个参数，“可以是任何可以序列化的东西。”不幸的是，您不能序列化一个函数。 WHATWG spec基本上说的是同一件事，但用了更多的话，其要点是状态对象中明确不允许使用函数。

解决方案是存储一个您可以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 )。