나는 document.write나쁜 습관으로 간주된다는 것을 안다 . 그리고 제 3 자 공급 업체에 제출하여 document.write분석 코드 구현에 사용해서는 안되는 이유에 대한 이유 목록을 작성하고 싶습니다 .
document.write아래에 잘못된 관행 이라고 주장한 이유를 포함하십시오 .
답변
더 심각한 문제 중 몇 가지 :
-
XHTML에서는 document.write (이후 DW)가 작동하지 않습니다
-
DW는 DOM을 직접 수정하지 않으므로 추가 조작을 방지할 수 있습니다 (증거를 찾으려고하지만 상황이 가장 좋습니다). -
페이지로드가 완료된 후 실행 된 DW는 페이지를 덮어 쓰거나 새 페이지를 쓰거나 작동하지 않습니다.
-
DW는 마주 친 곳에서 실행됩니다. 주어진 노드 포인트에 주입 할 수 없습니다
-
DW는 직렬화 된 텍스트를 효과적으로 작성합니다. 이는 DOM이 개념적으로 작동하는 방식이 아니며 버그를 만드는 쉬운 방법입니다 (.innerHTML도 같은 문제가 있습니다)
안전하고 DOM 친화적 인 DOM 조작 방법 을 사용하는 것이 훨씬 좋습니다
답변
실제로 document.write는 그 자체로 는 아무런 문제가 없습니다 . 문제는 오용하기가 정말 쉽다는 것입니다. 심하게도.
Google 애널리틱스와 같은 애널리틱스 코드를 제공하는 벤더 측면에서 실제로 이러한 스 니펫을 배포하는 가장 쉬운 방법입니다
- 스크립트를 작게 유지합니다
- 이미 설정된 onload 이벤트를 재정의하거나 onload 이벤트를 안전하게 추가하기 위해 필요한 추상화를 포함 할 것에 대해 걱정할 필요가 없습니다.
- 매우 호환됩니다
만큼 당신이 문서가로드 된 후 그것을 사용하려고하지 않는 한 ,document.write내 소견으로, 본질적으로 악하지 않다.
답변
또 다른 합법적 인 사용은 document.writeHTML5 Boilerplate index.html 예제 에서 비롯됩니다 .
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>또한 json2.js JSON 구문 분석 / stringify polyfill ( IE7 이하에서 필요) 을 사용하는 것과 동일한 기술을 보았습니다 .
<script>window.JSON || document.write('<script src="json2.js"><\/script>')</script>답변
페이지를 차단할 수 있습니다
document.write페이지가로드되는 동안에 만 작동합니다. 페이지로드가 완료된 후 호출하면 전체 페이지를 덮어 씁니다.
즉, 인라인 스크립트 블록에서 호출해야합니다. 그러면 브라우저가 다음 페이지의 일부를 처리하지 못합니다. 쓰기 블록이 완료 될 때까지 스크립트와 이미지는 다운로드되지 않습니다.
답변
찬성:
- 외부 (호스트 / 도메인) 스크립트에서 인라인 컨텐츠를 포함하는 가장 쉬운 방법입니다.
- 프레임 / iframe에서 전체 내용을 덮어 쓸 수 있습니다. 더 현대적인 Ajax 기술이 널리 사용되기 전에 (1998-2002) 메뉴 / 탐색 조각에이 기술을 많이 사용했습니다.
범죄자:
- 이 스크립트는 외부 스크립트가로드 될 때까지 일시 중지되도록 렌더링 엔진을 직렬화하여 내부 스크립트보다 훨씬 오래 걸릴 수 있습니다.
- 일반적으로 스크립트가 내용 내에 배치되는 방식으로 사용되며 이는 잘못된 형식으로 간주됩니다.
답변
여기에 두 가지 가치가 있습니다. 일반적으로 document.write무거운 물건을 들어서는 안되지만 확실히 유용한 한 가지 예가 있습니다.
http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
최근에 AJAX 슬라이더 갤러리를 만들려는 것을 발견했습니다. 두 개의 중첩 된 div를 만들고 JS로 width/ height및 overflow: hidden외부에 적용했습니다 <div>. 브라우저가 JS를 사용하지 않도록 설정 한 경우 div가 갤러리의 이미지를 수용 할 수 있도록 떠 오릅니다.
위의 기사와 마찬가지로 CSS의 JS 하이재킹은 페이지가로드 될 때까지 시작되지 않아 div 가로 드 될 때 순간적으로 플래시가 발생했습니다. 따라서 페이지가로드 될 때 CSS 규칙을 작성하거나 시트를 포함해야했습니다.
분명히 이것은 XHTML에서 작동하지 않지만 XHTML은 죽은 오리의 것으로 보이므로 IE에서 태그 수프로 렌더링되므로 DOCTYPE 선택을 다시 평가할 가치가 있습니다 …
답변
가장 명백한 이유 인 페이지의 내용을 덮어 쓰지만 “나쁜”것으로 부르지는 않습니다.
JavaScript를 사용하여 전체 문서를 작성하지 않으면 document.write로 시작할 수 없다면 많이 사용하지 않습니다.
그럼에도 불구하고 document.write를 사용할 때 DOM을 실제로 활용하지는 않습니다. 문서에 텍스트 덩어리를 덤핑하여 형식이 잘못되었다고 말할 수 있습니다.