如何将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

Answer 1

历史状态中的数据必须是可序列化的。也就是说，它必须可以转换为 JSON。 $(this) 返回一个带有 DOM 节点的类似数组的对象，该对象无法转换为 JSON。您应该寻找一种不同的方式来完成您正在寻找的事情。

请记住，推送状态只是有用的信息，并不意味着是规范的。如果用户无法通过在地址栏中复制并粘贴 URL 来获得完全相同的内容，那么就有问题了。

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] ​

Answer 3

扩展 Brian Nickel 和 GregL 的答案，你可以通过执行 $('#'+this.id).attr('href') 来解决这个问题......只要你按照我之前的两个人的建议来 ID DOM。

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

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

它使我能够在 id-ing 方面更具创意，例如，我可以有 $('#'+this.id+'*locator*');

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

Answer 4

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

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