2017-01-27 9 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?의 답변은 pushState이 지원되지 않는 IE < 10과 관련된 문제 만 설명하므로 유용하지 않습니다.

편집 외에도 역사를 업데이트하지에서

, pushState 즉이 업데이트되면, "앞뒤로 드롭 다운 목록", 앞뒤로 이동할 수 있습니다 URL을 업데이트, IE와 가장자리에, 그렇지 않으면 좋은 작품을 보인다 따라서.

편집 2

난 그냥 https://msdn.microsoft.com/en-us/library/ms535864(v=vs.85).aspx를 참조하십시오. "비고"에서 상태가

"보안을 위해 기록 개체는 브라우저 기록에 실제 URL을 노출하지 않습니다."

어쩌면 pushState의 일부는 IE와 Edge에서 지원되지 않습니다.

+0

다음은 replaceState와 유스 케이스를 사용한 예입니다. http://blog.scoutapp.com/articles/2010/12/07/manipulating-browser-history-with-javascript-pushstate-replacestate –

+0

@RobParsons Thanks. 하지만 IE/Edge의 문제에 대한 해답이 있습니까? – Daniel

+0

http://www.w3.org/TR/html5/browsers.html#dom-history-pushstate "6. 내 주소에 신경 쓰지 않기를 바랍니다. 6. 문서의 주소를 새 URL로 설정하십시오. 탐색 컨텍스트 또는 내역 탐색을 탐색하지 않습니다 ... " – user4749485

답변

0

IE/Edge는 어떤 이유로 연주하지 않는 것 같습니다 - 같아요 놀라운 일이 아니다.

기록을 변경하는 유일한 방법은 window.location.reload(), history.go(0) 또는 window.location.href=window.location.href을 통해 페이지를 새로 고침하는 것입니다.

https://codepen.io/pen 그런 식으로 보입니다.

이것은 웹 사이트의 현재 상태를 유지하기를 원하기 때문에 조금 성가시다. 어쩌면 하나는 사용자의 브라우저가 IE인지 확인한 다음에만 성가신 리로드를 할 수 있습니다. 다른 브라우저는 잘 작동합니다.

1

IE10 이상은 pushStatereplaceState을 지원하며 예제 코드는 모두에서 작동합니다.

그러나 IE의 하위 버전을 사용하여 호환성 모드 및 렌더링을 실행 중일 수 있습니다. (다시 샘플 코드는 그렇게 역사의 API를 지원하지 않는 IE7을 사용하여 렌더링)

Compatibility mode

당신은 개발자 도구를 가지고 F12을 눌러에 나와있는 IE의 버전을 확인하여이를 확인할 수 있습니다 검은 색 막대의 오른쪽.

가 그 일을 중지하려면 <head>이 추가 :

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

enter image description here

+0

감사합니다. 그러나 내 컴퓨터에서 IE 11은 기본적으로 Edge 모드에 있습니다. url이 변경된다는 점에서'pushState'와 같은 종류의 작동도 가능합니다. 그러나 기록 항목이 만들어지지 않습니다. 호환성 모드를 추가해도 아무 것도 바뀌지 않습니다. 브라우저가 페이지를 기록에 추가합니까? (나는 또한 내 대답을 편집하여 일어난 일에 대한 오해를 덜어주었습니다.) – Daniel

+0

IE11에서 foo 및 bar 히스토리 항목을 얻었습니다. 앞으로 이동하여 뒤로 이동할 수 있습니다. – JamesT

+0

놀랍습니다. 당신은 어떻게 역사를 보입니까? 별 기호를 클릭하면? 전후로 탐색 할 수 있지만 (그리고 앞뒤 버튼 옆에있는 드롭 다운 메뉴에서 해당 항목을 가져옵니다) 역사상 IE11에는 항목이 없습니다. – Daniel