W3C DOM을 통해 HTML 문서 전체를 대체하기 위한 다른 옵션은 무엇입니까?

W3C DOM을 통해 HTML 문서 전체를 대체하기 위한 다른 옵션은 무엇입니까?

나는 Ajax 웹 앱에서 런타임에 전체 문서를 교체하는 사람들의 경험이 궁금합니다.드물지만, 앱이 전체 페이지를 재구성해야 하고 모든 것이 다른 서버의 왕복 없이 로컬로 존재하는 몇 가지 상황을 발견했습니다.

새 문서를 새 DOM 트리 또는 문자열로 쉽게 준비할 수 있습니다.그래서 저는 다양한 접근법에 대한 절충안을 평가하고 있습니다.

String 접근 방식을 사용하려면 다음과 같이 해야 합니다.

document.open();
document.write(newStringDoc);
document.close();

대부분의 브라우저는 이 기능을 잘 수행하지만, 대부분의 브라우저는 다시 렌더링할 때 약간 깜박입니다.파이어폭스 4.0b7을 통해 두 번째에는 로드하는 것처럼 그냥 앉아서 회전한다는 것을 알게 되었습니다.위치 표시줄의 중지 버튼을 누르면 페이지 렌더링이 완료되는 것 같습니다. (편집: 4.0b8에서 수정된 것으로 보입니다.) 또한 이 방법은 사용자가 새로 고침을 눌러 현재 URL을 다시 로드하는 것을 방지하는 것 같습니다(동적으로 생성된 페이지를 다시 로드합니다).

새로운 DOM 트리 접근 방식(유연성과 속도의 장점/단점이 다름)을 사용하면 다음과 같이 작동합니다.

document.replaceChild(newDomDoc, document.documentElement);

대부분의 브라우저는 깜박임 없이 이 문제를 완벽하게 처리하는 것 같습니다.안타깝게도 IE9 베타는 "DOM 예외: HIRAGE_REQUEST_ERR (3)"을 다음에 슬로우합니다.replaceChild절대 완성되지 않습니다.최신 미리보기 릴리스를 사용하여 수정된 버그인지 확인하지 못했습니다. (편집: RC1에서 수정된 것으로 보입니다.)

제 질문은: 이 두 가지 중 어느 것과 다른 접근법을 가진 사람이 있습니까?특정 브라우저가 이러한 접근 방식 중 하나로 인해 근본적으로 고장나는 다른 주의 사항이 있습니까?

업데이트: 아마도 이것은 문맥을 추가하고 상상력에 도움이 될 것입니다.응용프로그램이 오프라인 상태인 경우를 고려합니다.리디렉션하거나 새로 고칠 서버가 없습니다.응용 프로그램의 필요한 상태가 이미 클라이언트 측에서 로드(또는 저장)되어 있습니다.UI는 클라이언트 측 템플릿으로 구성됩니다.

Gmail은 루트 문서에 내장된 iframe을 사용한다고 생각합니다.이들 중 적어도 일부 iframe이 기본 HTML5 문서일 경우 시작 문서로 나타납니다. 이 문서는 상위 문서를 조작합니다.

iframe을 사용하는 것은 전체 하위 iframe 또는 해당 문서만 교체하여 현재 문서를 교체해야 하는 요구 사항에 대한 또 다른 변형입니다.새로운 문서를 iframe에 첨부하는 방법에 대해서도 동일한 상황이 존재합니다.

저는 이것에 대한 연구를 마무리하면서 저만의 연구 결과로 이것에 답할 것이라고 생각합니다.

다음 방법 중 하나에 문제가 있는 두 브라우저가 모두 베타이므로, 전체 릴리스 전에 문제를 해결할 수 있는 버그 보고서를 열었습니다.

• 파이어폭스 4 베타: https://bugzilla.mozilla.org/show_bug.cgi?id=615927
  편집: FF 4b8에 고정됨.
• Internet Explorer 9 베타: https://connect.microsoft.com/IE/feedback/details/626473
  편집: IE9 RC1에 고정됨.

저는 또한 꽤 일관되게 이것이...

document.replaceChild(newDomDoc, document.documentElement);

...이것보다 2-10배 더 빠릅니다...

var doc = document.open("text/html");
doc.write(newStringDoc);
doc.close();

...DOM 노드를 빌드하는 데 필요한 시간과 HTML 문자열을 빌드하는 데 필요한 시간을 포함하는 경우에도 마찬가지입니다.이것이 깜박임의 이유일 수도 있고, DOM 접근법에 대한 또 다른 지지 주장일 수도 있습니다.크롬은 두 가지 방법 모두 깜박임이 없습니다.

반품된 제품을 보관할 때의 미묘한 변경 사항에 유의하십시오.document파이어폭스 4.0b7의 버그를 우회합니다.

또한 IE 문서가 "필수"라고 주장하는 MIME 유형이 추가되었습니다.

마지막으로 Internet Explorer(인터넷 익스플로러)는 새 문서를 스왑 인하기 전에 작성된 링크 태그를 해결하는 데 약간의 문제가 있는 것 같습니다.링크 href를 다시 자체에 할당하면 패치가 적용되는 것 같습니다.

// IE requires link repair
if (document.createStyleSheet) {
    var head = document.documentElement.firstChild;
    while (head && (head.tagName||"") !== "HEAD") {
        head = head.nextSibling;
    }

    if (head) {
        var link = head.firstChild;
        while (link) {
            if ((link.tagName||"") === "LINK") {
                link.href = link.href;
            }
            link = link.nextSibling;
        }
    }
}

하나는 모든 기지를 커버할 수 있고 이렇게 결합할 수 있습니다.

var doc = document;
try {
    var newRoot = newDoc.toDOM();
    doc.replaceChild(newRoot, doc.documentElement);

    // IE requires link repair
    if (doc.createStyleSheet) {
        var head = newRoot.firstChild;
        while (head && (head.tagName||"") !== "HEAD") {
            head = head.nextSibling;
        }

        if (head) {
            var link = head.firstChild;
            while (link) {
                if ((link.tagName||"") === "LINK") {
                    link.href = link.href;
                }
                link = link.nextSibling;
            }
        }
    }
} catch (ex) {
    doc = doc.open("text/html");
    doc.write(newDoc.toString());
    doc.close();
}

...당신이 저처럼 접근 방식을 선택할 능력이 있다고 가정합니다.

언급URL : https://stackoverflow.com/questions/4297877/what-other-options-for-replacing-entire-html-document-via-w3c-dom