일부 HTML (Fiddle)입니다 :파이어 폭스 실패 -에 location.hash하는 document.write를 업데이트를 사용한 후 원인 페이지 새로 고침
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test Write</title>
<script>
function test() {
if (window.location.hash == '#test') {
alert('The hash is already set!');
} else {
document.open();
document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\
<html>\
<head>\
<title>Hello There!</title>\
<script>\
function test() {\
window.location.hash="test";\
}\
</'+'script>\
</head>\
<body>\
<button onclick="test()">Test Hash Now</button>\
</body>\
</html>');
document.close();
}
}
</script>
</head>
<body>
<button onclick="test()">Click to write new page</button>
</body>
</html>
이를 실행하는 경우 - 다음 "새 페이지를 작성하는 클릭"- 문서에 새 HTML 단편을 작성합니다. 이번에는 "Test Hash Now"버튼이 있습니다 - 클릭하면 윈도우 업데이트 위치 .hash가 업데이트됩니다.
FireFox에서 페이지가 예기치 않게 다시로드하려고 시도합니다. 다른 모든 브라우저에서는 정상적으로 작동합니다. 피들에서 오류 메시지 {"error": "Please use POST request"}을 볼 수 있습니다. HTML 파일을 만들면 더 잘 작동합니다. "해시를 지금 테스트"를 클릭하면 "새 페이지를 작성하려면 클릭하십시오"버튼이 다시 표시됩니다 (잘못되어야합니다). .
왜 이런 일이 발생합니까?
사용 사례가 간단합니다. AJAX를 사용하여 많은 데이터를 가져 오는 자바 스크립트가 포함 된 부트 스트랩 페이지가 있습니다. 그런 다음 큰 HTML 문자열 (doctype/head/body/etc 포함)을 생성 한 다음 해당 HTML 문자열을 렌더링하면됩니다.
이 경우 나는 인라인 HTML을 상수로 사용하고 있습니다. 그러나 실제로는 어떤 논리를 사용하여 그것을 생성하고 있습니다. 나는 서버가 무엇을 응답 할 것인지 시뮬레이션하고 클라이언트의 서버 측 요구 사항을 제거하려고한다.
나는 하나의 파일에 압축 된 HTML 및 JS 파일을 여러 장 가지고 있으며 개발자 (또는 개발자)에게 서버 또는 데이터베이스가 필요없이 실행할 수 있습니다. 그런 다음 그들은 실제 거래 인 것처럼 페이지를 볼 수있었습니다. 그게 내 목표 야. HTML을 페이지의 기존 요소에 넣으면 (예 : 현재 페이지의 본문 만 조작하는 등) 전체 문서가 생성 된 것처럼 정확히 작동하지 않습니다. 게다가 나는 부트 스트랩 HTML 파일을 정말로 작게 만들고 싶다.
모든 것이 정상적으로 작동하는 것 같습니다. 단, Firefox 만 실패합니다. 페이지 내부에서 참조 된 스크립트가 window.location.hash에 쓰기 위해 필요한 경우가 아니라면 모두 작동합니다. 전체 페이지를 다시로드하려고 시도합니다 ... Uggg ...
더 좋은 방법은이 작업을 수행하는 것입니다. ?
iframe을 만들고 동일한 document.open();document.write(html);document.close()을 사용하려고 시도했지만 똑같은 문제가 발생합니다.
제게 Firefox 20에서 잘 작동합니다. –