当前位置: 首页 > 面试题库 >

通过W3C DOM替换整个HTML文档还有哪些其他选择?

景靖琪
2023-03-14
问题内容

我很好奇人们在运行时在Ajax Web应用程序中替换 整个 文档的经历。很少见,但是我发现一些情况下,应用程序需要重建整个页面,并且 所有内容
都在本地存在而无需其他服务器往返。

我可以很容易地准备新的文档 或者 一个新的DOM树或字符串。因此,我正在评估各种方法的权衡。

如果我想使用String方法,这似乎可行:

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

大多数浏览器都可以正常运行,但是许多浏览器在重新渲染时都会出现轻微闪烁。我已经注意到,通过Firefox
4.0b7的第二次安装只会坐在那里旋转,就好像它正在加载一样。点击位置栏上的停止按钮似乎可以完成页面渲染。( 编辑:
此问题似乎已在4.0b8中修复)。此方法似乎还防止用户单击刷新来重新加载当前URL(它重新加载动态生成的页面)。

如果我使用新的DOM树方法(在灵活性和速度方面具有不同的优点/缺点),那么这似乎可行:

document.replaceChild(newDomDoc, document.documentElement);

大多数浏览器似乎都能很好地处理而不会闪烁。不幸的是,IE9 beta抛出“ DOM异常:HIERARCHY_REQUEST_ERR(3)”
replaceChild,但从未完成。我没有尝试使用最新的预览版来查看这是否只是一个已修复的新错误。( 编辑: 这似乎已在RC1中修复。)

我的问题是: 除了这两种方法之外,还有没有其他方法可以使用?是否有人在某些特定浏览器根本无法使用这些方法之一分解的情况下发出警告?

更新:
也许这会增加上下文并有助于想象。考虑一个应用程序离线的情况。没有可用于重定向或刷新的服务器。应用程序的必要状态已在客户端加载(或存储)。UI是从客户端模板构建的。

我相信Gmail使用嵌入在根文档中的iframe。看来,至少其中一些iframe的起始文档只是父文档然后处理的裸HTML5文档。

使用iframe是通过替换整个子iframe或仅替换其子文档来替换当前文档的要求的另一种变体。但是,将新文档附加到iframe的方法也存在相同的情况。


问题答案:

我想在总结研究过程时,将用自己的发现回答这个问题。

由于这两种方法之一都存在问题的两个浏览器均为beta版,因此我已经打开了错误报告,希望这些报告能够在其完整版本发布之前解决这些问题:

  • Firefox 4 Beta:https
    : //bugzilla.mozilla.org/show_bug.cgi?id=615927 编辑: 在FF 4b8中修复。

  • Internet Explorer 9 Beta: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方法的另一个支持理由。Chrome的任何一种方法都不会闪烁。

请注意,存储返回的document内容的细微变化可以避免Firefox 4.0b7中的错误。

另请注意,此添加的MIME类型是IE docs声称为“必需”的类型。

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

…假设您有能力像我一样选择方法。



 类似资料:
  • 问题内容: 我正在尝试将换行符()转换为html 。 根据Google网上论坛的讨论,这是我得到的: 那里的讨论还建议在视图中使用以下内容: 这似乎正在使用旧的过滤器,而现在我们应该使用属性。 无论如何,这都会带来一个问题:我不希望原始字符串()中的任何HTML 都呈现为HTML;只有的。 例如,给定以下字符串: 虽然7> 5,但 我仍然不希望html和其他东西出现在这里… 我希望它输出: 有什么

  • 本文向大家介绍html元素哪些标签是不可替换元素?哪些是可替换元素?相关面试题,主要包含被问及html元素哪些标签是不可替换元素?哪些是可替换元素?时的应答技巧和注意事项,需要的朋友参考一下 (replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。也就是说,css 可以影响元素但是不能影响其内容的显示。 可替换元素: …

  • 我想知道如何检索Firestore收藏中的所有其他文档。我有一个包含日期字段的文档集合。我想按日期对它们进行排序,然后从排序后的集合中的每个X大小的块中检索1个文档。我大约每10秒钟就添加一个新文档,并试图在前端显示历史数据,而不必下载这么多记录。

  • 我有一个从postgresql表导出多个字段,包括布尔值(由postgresql导出为和字符),我需要将其导入到另一个数据库(monetdb),该数据库不理解t/f为bool值。 (编辑删除空格以反映真实的文件方面,避免愤怒的评论-以前有空格显示) 由于我不能替换所有出现的/,我需要在我的模式中集成字段分隔符。我尝试使用将字段替换为,将字段替换为: 这部分起作用,因为具有相同值的连续字段()将只替

  • 问题内容: 说我们应该避免使用这种技术。这个说很棒。Google是否会在CSS文件中查找并惩罚您?:| 我使用的财产 很多 隐藏的文本。例如,我有一个由图标表示的按钮: CSS: 我看不到任何替代代码的方法。如果将其替换为图像,则每个按钮图像都会自动获得+20 HTTP请求。 如果我将链接设置为空,则可访问性会降低,因为屏幕阅读器不会知道它是什么。空链接看起来很奇怪,可能Google也不喜欢它。