通过W3C DOM更换整个HTML文档什么其他的选择？ [英] What other options for replacing entire HTML document via W3C DOM?

查看：105
本文介绍了通过W3C DOM更换整个HTML文档什么其他的选择？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我好奇的人们与替代的全部的文件在运行时在Ajax Web应用程序的经验。这是罕见的，但我发现了一些情况下，应用程序需要一整页和重建的所有的是present本地，而不需要其他服务器往返。

我可以很容易prepare新的文档的或者的一个新的DOM树或字符串。所以我评估权衡各种办法。

如果我想使用字符串的方法这似乎工作：

  document.open（）;
文件撰写（newStringDoc）;
document.close（）;

大多数浏览器这样做就好了，但许多有轻微的闪烁时，重新渲染。我已经注意到，通过火狐4.0b7的第二次将只是坐在那里，旋转，仿佛它加载。击中的位置栏上的停止按钮似乎完成网页渲染。 （修改这似乎固定在4.0b8），另外这个方法似乎prevent击中刷新重新加载当前URL（它重新加载动态生成的页面）的用户。

如果我用一个新的DOM树方法（它有不同的优势/在灵活性和速度劣势），那么这似乎工作：

  document.replaceChild（newDomDoc，document.documentElement中）;

大多数浏览器似乎处理这个完全正常无闪烁。不幸的是，IE9的测试版抛出DOM异常：HIERARCHY_REQUEST_ERR（3）关于的replaceChild 并无法完成。我还没有尝试过的最新的preVIEW版本，看看这是否只是得到了修复一个新的​​bug。 （编辑：这似乎固定在RC1）

我的问题：没有任何人有不同的方法比任何这些？没有人有任何其他的注意事项，其中也许是一个特定的浏览器从根本上打破了用这些方法呢？

更新：或许，这将增加背景和帮助的想象。考虑一个情况：一个应用程序处于脱机状态。没有可用的服务器重定向或刷新。应用程序的必要的状态已经被加载（或存储）的客户端。用户界面是由客户端模板建造。

我相信，Gmail使用内置页框嵌入一个根文档中。它出现在开始文档，至少一些内置页框都只是一个光秃秃的HTML5文件，它的父文件，然后操纵。

使用的iframe将是对要求另一种变型由更换整个儿童iframe或只是它的文件，以取代当前文档。同样的情况存在的，虽然用什么办法，新文件附加到iframe中。

解决方案

我想我会回答我自己的调查结果，我结束了我的研究这一点。

由于这两个浏览器具有问题，这些方法都是测试版，我已经打开的bug报告其中一个希望能解决这些他们完全释放之前：

  • 在火狐4测试版：<一href="https://bugzilla.mozilla.org/show_bug.cgi?id=615927">https://bugzilla.mozilla.org/show_bug.cgi?id=615927
    编辑：固定在FF 4B8
  • 在Internet Explorer 9的测试版：<一href="https://connect.microsoft.com/IE/feedback/details/626473">https://connect.microsoft.com/IE/feedback/details/626473
    编辑：固定在IE9 RC 1

我还发现pretty的一致，这... 

  document.replaceChild（newDomDoc，document.documentElement中）;

...比这2-10x快... 

  VAR DOC = document.open（text / html的）;
doc.write（newStringDoc）;
doc.close（）;

...即使包括建立DOM节点与建立HTML字符串所需要的时间。这可能是对DOM方法为闪烁的原因，或者只是一个辅助论据。 Chrome不与任何一种方法的任何闪烁。

请注意存储返回的微妙的变化，文件规避在Firefox 4.0b7的bug。

另外请注意这个增加的MIME类型，它的IE文档声称是必需的。

最后，IE浏览器似乎有一点是建成之前，新的文件交换麻烦解决的链接标签。指定的链接HREF回本身似乎修补它。

  // IE需要联系维修
如果（document.createStyleSheet）{
    VAR头= document.documentElement.firstChild;
    而（头和功放;及（head.tagName ||）==！HEAD）{
        头= head.nextSibling;
    }

    如果（头）{
        VAR链接= head.firstChild;
        而（链接）{
            如果（（link.tagName ||）===链接）{
                link.href = link.href;
            }
            链接= link.nextSibling;
        }
    }
}

一个可以涵盖所有基地，并结合他们这样的... 

  VAR DOC =文件;
尝试 {
    变种newRoot = newDoc.toDOM（）;
    doc.replaceChild（newRoot，doc.documentElement）;

    // IE需要联系维修
    如果（doc.createStyleSheet）{
        VAR头= newRoot.firstChild;
        而（头和功放;及（head.tagName ||）==！HEAD）{
            头= head.nextSibling;
        }

        如果（头）{
            VAR链接= head.firstChild;
            而（链接）{
                如果（（link.tagName ||）===链接）{
                    link.href = link.href;
                }
                链接= link.nextSibling;
            }
        }
    }
}赶上（前）{
    DOC = doc.open（text / html的）;
    doc.write（newDoc.toString（））;
    doc.close（）;
}

...假设你要选择你的做法像我这样的能力。

I am curious about people's experiences with replacing the entire document at runtime in an Ajax web app. It's rare, but I've found a few situations where the app requires an entire page rebuild and everything is present locally without needing another server round-trip.

I can easily prepare the new document as either a new DOM tree or as a String. So I'm evaluating the trade-offs for various approaches.

If I want to use the String approach this seems to work:

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

Most browsers do this just fine, but many have a slight flicker when re-rendering. I've noticed that on the 2nd time through Firefox 4.0b7 will just sit there and spin as if it is loading. Hitting the stop button on the location bar seems to complete the page render. (Edit: this appears to be fixed in 4.0b8) Also this method seems to prevent the user from hitting refresh to reload the current URL (it reloads the dynamically generated page).

If I use a new DOM tree approach (which has different advantages/disadvantages in flexibility and speed), then this seems to work:

document.replaceChild(newDomDoc, document.documentElement);

Most browsers seem to handle this perfectly fine without flicker. Unfortunately, IE9 beta throws "DOM Exception: HIERARCHY_REQUEST_ERR (3)" on replaceChild and never completes. I haven't tried the latest preview release to see if this is just a new bug that got fixed. (Edit: this appears to be fixed in RC1.)

My question: does anyone have a different approach than either of these? Does anyone have any other caveats where perhaps a particular browser fundamentally breaks down with one of these approaches?

Update: Perhaps this will add context and help the imagination. Consider a situation where an application is offline. There is no server available to redirect or refresh. The necessary state of the application is already loaded (or stored) client-side. The UI is constructed from client-side templates.

I believe that Gmail uses iframes embedded within a root document. It appears the starting document for at least some of these iframes are just a bare HTML5 document which the parent document then manipulates.

Using an iframe would be another variant on the requirement to replace the current document by replacing the entire child iframe or just its document. The same situation exists though of what approach to attach the new document to the iframe.

解决方案

I guess I will answer this with my own findings as I'm wrapping up my research on this.

Since the two browsers which have issues with one of these methods are both beta, I've opened bug reports which hopefully will resolve those before their full release:

I've also found pretty consistently that this...

document.replaceChild(newDomDoc, document.documentElement);

...is 2-10x faster than this...

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

...even when including the time needed to build the DOM nodes vs. build the HTML string. This might be the reason for the flicker, or perhaps just another supporting argument for the DOM approach. Chrome doesn't have any flicker with either method.

Note the subtle change of storing the returned document which circumvents the bug in Firefox 4.0b7.

Also note this added MIME type which the IE docs claim is "required".

Finally, Internet Explorer seems to have a bit of trouble resolving link tags that were built before the new document is swapped in. Assigning the link href back to itself appears to patch it up.

// 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;
        }
    }
}

One could cover all bases and combine them like this...

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();
}

...assuming you have the ability to choose your approach like I do.

这篇关于通过W3C DOM更换整个HTML文档什么其他的选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆