如何将jQuery对象传递给history.pushState

Question

var data = { url: $(this).attr('href'), selector: $(this) };
history.pushState(data, 'foo', $(this).attr('href'));

当我这样做时，会出现一个错误：

组件返回故障代码：0x8000ffff（NS_ERROR_UNEXPECTED） [nsIDOMHistory.pushState]

如果我将选择器更改为字符串，则错误消失了... 但是我需要jQuery对象，以便在“popstate”事件上触发单击:s

- M K

Answer 1

历史状态中的数据必须是可序列化的，也就是说，它必须可以转换为 JSON。`$(this)` 返回一个类似数组的对象，其中包含不能转换为 JSON 的 DOM 节点。你应该寻找一种不同的方法来实现你所寻求的功能。

请记住，推送状态仅是有用的信息，而不是规范。如果用户无法通过复制和粘贴地址栏中的 URL 获取完全相同的内容，则存在问题。

- Brian Nickel

Answer 2

您可以存储一个（不可序列化的）复杂对象的引用，然后通过引用进行检索。

以下是一个快速演示：

var historyStateReference = {
    url1:{/*richobj*/},
    url2:{/*richobj*/}    
}
var serializableObj = {
    richObjRef = "url1",
    //otherProps
}


// pushState with a simple serializable Object
history.pushState(serializableObj, null, "newPath");



// then later refrence it via history.state 
historyStateReference[history.state.richObjRef] ​

- adardesign

---

较大的 DOM 元素会在 RAM 上创建很大的负载，根据 Firefox 开发页面所述，数据存储在硬盘上，只有在需要时才检索。 - Ravinder Payal

不太确定你的意思，请澄清。 - adardesign

抱歉，我以错误的方式考虑了这个问题，我很快会删除我的评论。 - Ravinder Payal

Answer 3

在Brian Nickel和GregL的回答基础上，你可以通过$('#'+this.id).attr('href')来解决这个问题...只要像前面两位建议的那样给DOM命名ID。

有时我只能通过以下方式获得想要的结果：

var $this = $('#'+this.id); //.... before hand ... 

这使我在标识时更有创意，例如，我可以使用$('#'+this.id+'*locator*');

... id='abGGFather'
... id='abGFather'
... id='abFather'
... id='ab'

- zequinha-bsb

Answer 4

考虑为由jQuery对象表示的DOM节点分配一个ID或其他唯一属性，然后您可以将该ID的值作为字符串存储在数据对象中，这是可序列化的。

如果元素没有唯一的ID，请考虑生成一个并将其添加到元素中。

- GregL