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

因此,我使用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”

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

解决方法:

不,这是不可能的,不是直接的. 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.] MyAppGlobal.switchPageToMode1,在这种情况下你可以调用MyAppGlobal [func](参数).

标签：javascript,html5,browser-history
来源： https://codeday.me/bug/20190610/1208640.html