Introduzido desde Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
O HTML5 introduz dois métodos, histtory.pushState() e history.replaceState(), que permitem a adição e modificação de entidades de histórico. Ao mesmo tempo, esses métodos funcionam com o evento window.onpostate.
Modifique o referenciador usando o método history.pushState(), que pode ser usado no cabeçalho http criado para o objeto xmlhttpRequest após a modificação do estado. Esse referenciador será a URL do documento quando o XMLHttpRequest foi criado.
pushState é usado para adicionar um registro da página atual ao histórico, enquanto replaceState e pushState são usados exatamente da mesma forma, a única diferença é que ele é usado para modificar o registro da página atual no histórico.
exemplo
Suponha que http://mozilla.org/foo.html página execute o JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "página 2", "bar.html");
Esse método fará com que a barra de endereços da URL seja exibida http://mozilla.org/bar.html,Mas o navegador não carrega bar.html página, mesmo que ela exista。
Agora novamente assuma que o usuário continua acessando o http://google.com e clica para voltar. Neste momento, a barra de endereços da URL, http://mozilla.org/bar.html, a página receberá um evento popstate (chrome), que conterá uma cópia do stateObj. Esta página parece foo.html. +
Neste ponto, clicamos novamente e a URL vira http://mozilla.org/foo.html,document recebe outro evento popstate e um objeto de estado nulo. Essa ação de retorno não altera o conteúdo do documento. (Talvez depois de um tempo tente carregar...) chrome)
Método pushState
pushState() possui três parâmetros: objeto state, título (agora ignorado, não tratado), URL (opcional). Especificidades:
· objeto state – O objeto state é um objeto Javascrip{filter}t que se relaciona a uma nova entidade de histórico criada pelo método pushState(). Usado para armazenar informações sobre as entradas que você quer inserir no histórico. O objeto Estado pode ser qualquer cadeia Json. Como o Firefox usa o disco rígido do usuário para acessar o objeto de estado, o espaço máximo de armazenamento desse objeto é de 640k. Se for maior que esse valor, o método pushState() lança uma exceção. Se você precisar de mais espaço para armazenar, use armazenamento local.
· título—O Firefox ignora esse parâmetro atualmente, embora ele possa ser usado no futuro. A forma mais segura de usá-la agora é passar uma corda vazia para evitar modificações futuras. Ou você pode passar um título curto para indicar o estado
· URL - Este parâmetro é usado para passar a URL da nova entidade de histórico, note que o navegador não carregará essa URL após chamar o método pushState(). Mas talvez depois de um tempo ele tente carregar essa URL. Por exemplo, após o usuário reiniciar o navegador, a nova URL pode não ser um caminho absoluto. Se for um caminho relativo, então será relativo à URL existente. A nova URL deve ser co-domínio com a URL existente, caso contrário pushState() lançará uma exceção. Esse parâmetro é opcional e, se vazio, será colocado como a URL atual do documento.
De certa forma, chamar o método pushState() é semelhante a definir window.locatio{filter}n = "#foo", ambos criando e ativando outra entidade de histórico associada ao documento atual, mas pushState() tem algumas vantagens adicionais:
A nova URL pode ser qualquer URL que esteja no mesmo domínio da URL atual, ao contrário de window.locatio{filter}n permanecer no mesmo documento se apenas o hash for definido.
L Você pode deixar a URL sem modificação se não precisar. Para comparação, defina window.locatio{filter}n = "#foo"; Apenas novas entidades de histórico são geradas, se seu hash atual não estiver #foo
Você pode associar dados arbitrários à sua nova entidade de histórico. Com uma abordagem baseada em hash, todos os dados relevantes precisam ser codificados em uma sequência curta.
Note que o método pushState() não faz com que o tempo de troca de hash aconteça, mesmo que as URLs antiga e nova sejam apenas hashes diferentes.
método replaceState()
history.replaceState() é usado de forma muito parecida com pushState(), exceto que replaceState() é usado para modificar a entidade de histórico atual em vez de criar uma nova. Esse método às vezes pode ser útil quando você precisa atualizar um objeto de estado ou a entidade de histórico atual em resposta a determinado comportamento do usuário, e pode usá-lo para atualizar a URL do objeto de estado ou da entidade de histórico atual.
Evento Popstate
Quando a entidade de histórico é alterada, ocorre o evento popstate. Se a entidade de histórico for gerada pelos métodos pushState e replaceState, o atributo de estado do evento popstate conterá uma cópia do objeto de estado da entidade de histórico
Veja windows.onpopstate para detalhes
Leia o estado atual
Leia o estado atual
Quando a página carrega, ela pode ter um objeto de estado não vazio. Isso pode acontecer quando a página define um objeto de estado (usando pushState ou replaceState) e o usuário reinicia o navegador. Quando a página recarrega, ela receberá um evento de onload, mas não haverá evento popstate. No entanto, se você ler a propriedade history.state, você obterá esse objeto de estado após o evento popstate ocorrer
Documentação do History.pushState(): https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
O parâmetro da URL receptora é do tipo string, que é usado para alterar a URL da barra de endereços atual. Uma coisa a notar é que esse parâmetro não pode ser o mesmo que o multidomínio, ou seja, o protocolo, o nome de domínio e a porta devem ser os mesmos.
DOMException não capturado: Falhou em executar 'pushState' em 'History': Um objeto history state com URL 'http://www.test.com/' não pode ser criado em um documento com origem ' https://www.itsvse.com' e URL 'https://www.itsvse.com/'.
em <anonymous>:1:9
Código correto:
|
Publicado em 12/09/2017 13:55:04
|
|
|
|
Publicado em 27/10/2017 09:51:10