2017-01-27 12 views
1

С window.history.pushState можно указать состояние в историю браузера.Как нажать на историю браузера в IE (> 10) и Edge?

Пример:

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
</head> 
<body> 
<input type="button" value="foo" onclick="setHistory('foo');"> 
<input type="button" value="bar" onclick="setHistory('bar');"> 
<script> 
function setHistory(string) { 
    document.title = string; 
    window.history.pushState(
      'object or string', 
      '', 
      string+'.html' 
     ); 
} 
</script> 
</body> 
</html> 

После нажатия на кнопку Foo и бар ответившие записи будут отображаться в истории браузера. Это работает в Firefox, Chrome и Safari. Однако не в IE (> 10) и Edge, даже если они официально поддерживают его. Есть ли способ достичь этого?

Ответы на вопросы Does Internet Explorer support pushState and replaceState? не полезны, поскольку они объясняют проблему только с помощью IE < 10 где pushState не поддерживается.

Редактировать

Помимо не обновляет историю, pushState кажется работает иначе отлично в IE и Edge, т.е. обновляет URL, может перемещаться вперед и назад, «назад и вперед выпадающего списка» обновляется соответственно.

Edit 2

Я только что прочитал https://msdn.microsoft.com/en-us/library/ms535864(v=vs.85).aspx. В разделе «Примечания» указано:

«Из соображений безопасности объект истории не раскрывает фактические URL-адреса в истории браузера».

Так что, может быть, часть pushState Я после просто не поддерживается в IE и Edge?

+0

Вот пример использования заменыState с использованием: http://blog.scoutapp.com/articles/2010/12/07/manipulating-browser-history-with-javascript-pushstate-replacestate –

+0

@RobParsons Спасибо. Но есть ли ответ на проблему с IE/Edge? – Daniel

+0

Надеюсь, вы не против моего упоминания: http://www.w3.org/TR/html5/browsers.html#dom-history-pushstate. 6. Установите адрес документа на новый URL. Примечание. Поскольку это ни навигации контекста просмотра, ни обхода истории ... » – user4749485

ответ

0

IE/Край, кажется, не подыгрывать по какой-то причине - не удивительно, я думаю.

Единственный способ изменить историю, по-видимому, является дополнительной перезагрузкой страницы через window.location.reload(), history.go(0), или window.location.href=window.location.href.

https://codepen.io/pen похоже, так.

Это немного раздражает, так как также хотелось бы сохранить текущее состояние веб-сайта. Возможно, можно проверить, является ли браузер пользователей IE, и только после этого нужно раздражать перезагрузку. Кажется, что другие браузеры играют хорошо.

1

IE10 и выше поддерживают pushState и replaceState и ваш пример кода работает в обоих.

Однако вы можете запускать режим совместимости и рендеринг с использованием более низкой версии IE. (Опять же ваш пример кода делает это и делает с помощью IE7, который не поддерживает API истории)

Compatibility mode

Вы можете проверить это, нажав клавишу F12, чтобы открыть инструменты разработчика и посмотреть, что версия IE перечислен на справа от черной полосы.

Чтобы остановить это делать, что добавить к вашей <head>:

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

enter image description here

+0

Спасибо. Однако на моей машине IE 11 по умолчанию находится в режиме Edge. Кроме того, 'pushState' работает в том, что URL изменяется. Но элемент истории не создается. (Добавление режима совместимости ничего не меняет.) Добавляет ли ваш браузер страницы в историю? (Я также отредактировал свой ответ, чтобы неправильно понять, что происходит менее вероятно.) – Daniel

+0

Я получаю записи истории foo и bar в IE11, и я могу перемещаться вперед и назад через них. – JamesT

+0

Это удивительно. Как вы смотрите на историю? Нажимая на символ звезды? Я могу перемещаться только вперед и назад (и получить соответствующие записи в выпадающем меню рядом с кнопками «назад» и «вперед»), но не получить записи в IE11 в истории. – Daniel